必须显式定义grid-template-columns和grid-template-rows才能形成有效网格；仅设display: grid默认单列，项目堆叠如普通流；负数线号指向最末显式线而非内容尾；fr单位须在模板中使用；命名区域更安全可靠。
grid 不是加个 display: grid 就能用的——它必须显式定义行列轨道，否则项目会堆在第一格里，看着像没生效。
grid-template-columns 和 grid-template-rows 必须写
只设 display: grid 的容器，默认只有 1 列、行高由内容撑开，所有项目从左到右、从上到下填进这唯一一列里，视觉上和普通块流无异。
真正“画出网格”，得靠这两个属性：
-
grid-template-columns定义列轨道（垂直方向的线），比如1fr 2fr或repeat(3, 1fr) -
grid-template-rows定义行轨道（水平方向的线），比如100px auto或repeat(2, minmax(100px, auto)) - 不写
grid-template-rows？浏览器不会自动生成等高行——它只按内容高度生成隐式行，grid-row定位可能失效或错位
grid-column / grid-row 数值容易算错：记住“线编号 +1”规则
3 列 → 4 条列线（编号 1 到 4）；2 行 → 3 条行线（编号 1 到 3）。跨列写成 grid-column: 1 / 3 是跨前两列，不是“从第 1 列到第 3 列”。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
- 写
grid-column: 1 / -1想占满整行？它只到**最后一根显式定义的列线**，如果只写了grid-template-columns: 1fr 1fr（2 列 → 3 条线），-1就是第 3 条线，没错；但若后续加了第 3 列却忘了更新模板，定位就偏了 - 用负数时，
-1永远指最末显式线，不是内容末尾；想稳妥就命名区域，用grid-area - 别对非直接子元素用这些属性——
grid-column只作用于容器的**直接子元素**，嵌套结构里孙子节点无效
fr 单位和 repeat() 配合才能真正省事
fr 不是像素，是剩余空间的比例份额；但它不能脱离显式轨道存在。单独写 width: 1fr 会报错——必须出现在 grid-template-columns 或 grid-template-rows 里。
高效写法示例：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)));
这行代码的意思是：每列最小 300px，尽可能多放，剩余空间按 1:1 分给所有列。比手写 1fr 1fr 1fr 灵活得多，且响应式友好。
注意：
-
auto-fit会合并空轨道，auto-fill则保留空轨道占位 -
minmax(300px, 1fr)中的1fr是上限，不是固定值；实际宽度取决于容器总宽和列数 - 混用单位如
200px 1fr 2fr时，固定值先分配，剩下空间再按 fr 比例切
grid-template-areas 命名区域比数字更可靠
当布局稍复杂（比如带 header / sidebar / footer 的仪表盘），用字符串命名区域比记数字线更安全：
grid-template-areas: "header header"<br>"main sidebar"<br>"footer footer";
然后项目上写 grid-area: header，增删一行不会导致所有 grid-row 编号全乱。
但要注意限制：
- 每个区域必须是**完整矩形**，不能 L 形、不能带空洞
- 字符串中每个单词代表一列，每行字符串代表一行，空格分隔列，换行分隔行
- 所有区域名必须在模板中出现，且拼写完全一致（大小写敏感）
真正的难点不在语法，而在思维切换：Grid 不是“让元素排好”，而是“先划好格子，再把东西放进去”。漏掉 grid-template-columns，就像只说“我要下棋”却不摆棋盘——后面所有落子都无处安放。
