与“grid布局”相关的TAG标签
z-index对浮动元素无效，因float不创建层叠上下文且z-index仅对定位元素生效；需同时添加position:relative和z-index才生效，推荐改用flex或grid布局。
响应式Grid的核心是按断点主动切换网格结构，最直接方式是在@media中重定义grid-template-columns等整体属性，而非仅调整子项；需同步重置grid-template-areas、grid-auto-flow等依赖项以避免布局错乱。
fr是CSSGrid的分数单位，表示剩余可用空间的一份，不同于固定像素（px）和相对父容器的百分比（%），仅在grid-template-columns/rows中生效，且受内容尺寸、minmax()等限制影响。
display:grid是现代布局的默认起点，需先设父容器为grid，再用grid-template-columns和grid-template-rows定义行列结构，网格线从1开始编号，支持负数和span跨格。
Grid容器默认content-box，width/height不含padding/border；需设box-sizing:border-box防布局错位；fr分配剩余空间，px/em/rem易溢出；子项margin撑gutter，padding/border耗轨道内空间；响应式须统一border-...
旧浏览器不识别display:grid时布局直接失效：IE10/11降为单列堆叠，Safari8.0完全忽略grid属性致塌陷空白；@supports无效于IE全系及Safari9；-ms-grid需独立语法并置标准属性；推荐floatflexgrid分层回退。
Grid容器未被识别需先确认display:grid生效；网格线不可见应开启浏览器Grid可视化面板；grid-area失效主因是命名与grid-template-areas不严格匹配；悬停显示的行列范围受负索引、span及命名线优先级影响。
place-items同时设置align-items和justify-items，作用于grid容器的直接子项，控制其在交叉轴和主轴的对齐；place-content同时设置align-content和justify-content，控制网格轨道整体在容器内的分布。
Grid布局移动端渲染性能达标但计算成本比Flex高15–30%，因需解算二维约束；auto-fit、命名区域、嵌套Grid、calc()显式定位等写法显著拖慢Layout。
图片在Grid中拉伸变形的根本原因是未设置object-fit，该属性需作用于元素而非容器；常用值包括cover（等比裁剪）、contain（等比留白）、fill（强制拉伸）和scale-down（兜底缩放），并需配合object-position控制裁剪区域。
