Grid布局核心是轨道定义、内容定位与避免错乱：grid-template-rows/columns定义轨道而非单元格数，fr单位需剩余空间才生效，minmax更安全；grid-column/row用线号定位，负号从末尾计；grid-template-areas须矩形拼合且命名规范；响应式需重置定位属性并慎用dense。
Grid 布局不是“用不用”的问题，而是“怎么设轨道、怎么放内容、怎么避免重叠或塌陷”的问题。直接上手写 display: grid 很容易卡在元素不按预期排列、grid-area 失效、响应式错乱这些地方。
如何定义行和列的尺寸（grid-template-rows / grid-template-columns）
这两项决定网格容器的骨架，也是最容易误解的地方：它们定义的是**轨道（track）**，不是单元格数量；值的顺序对应从上到下、从左到右的轨道方向。
-
fr单位是比例分配，但只在有剩余空间时生效；如果内容撑满容器，1fr 2fr和100px 200px表现可能一致 - 用
minmax(200px, 1fr)比单纯写1fr更安全，防止小屏下列宽压缩到不可读 - 避免混用固定值和
auto：比如grid-template-columns: 200px auto 1fr中的auto会先按内容宽度计算，再把剩余空间给1fr，常导致第三列异常窄
如何把元素放进指定网格区域（grid-area 和线性定位）
grid-area 是最简洁的定位方式，但它依赖命名区域；更常用且可控的是用起止线（line-based placement），尤其适合动态内容或 JS 注入的节点。
- 写
grid-column: 2 / 4表示从第 2 条竖线开始，到第 4 条竖线结束（即跨 2 列），注意不是“第 2 列到第 4 列” - 负数线号从末尾计数：
grid-row: -2 / -1表示倒数第二行到最后一行 - 如果元素没设
grid-column或grid-row，它会按源顺序自动填入下一个空闲网格单元，此时若容器设置了grid-auto-flow: column，布局方向就变成从上到下、再从左到右
为什么 grid-template-areas 有时不生效
这个属性要求所有命名区域必须拼合成一个**矩形块**，中间不能有空缺或错位，否则整条声明会被浏览器忽略（DevTools 里能看到该 CSS 属性被划掉）。
立即学习“前端免费学习笔记（深入）”；
- 每行字符串长度必须一致，用
.表示空单元格，不能留空格或省略 - 区域名只能是字母、数字、短横线，不能含下划线或中文
- 每个区域名在模板中至少出现两次（上下/左右相邻才构成区域），否则解析失败
grid-template-areas: "header header header" "nav main aside" "footer footer footer";
响应式网格常见断裂点
用 @media 重设 grid-template-areas 或 grid-template-columns 是常规操作，但容易忽略两点：一是 grid-column 等定位属性不会自动重置，需在媒体查询内显式覆盖；二是 grid-auto-rows 在小屏下若仍设为 1fr，可能让某一行撑高整个视口。
- 移动端优先时，建议默认用单列
grid-template-columns: 1fr，再在大屏用minmax()拓展 - 对卡片类列表，慎用
grid-auto-flow: dense—— 它会让后续项目“插队”填充空隙，破坏 DOM 顺序，影响可访问性和 SEO
Grid 的复杂度不在语法多，而在轨道、区域、自动放置三者之间的隐式交互。调样式前先在 DevTools 里打开“Layout”面板，勾选“Show grid line numbers”，比猜更可靠。
