结论：用 grid-column 和 grid-row 控制起止线或跨度更可靠；卡点在于网格线编号逻辑和隐式轨道干扰。
直接说结论：用 grid-column 和 grid-row 控制起止线或跨度，比硬记“跨几行几列”更可靠；真正卡住人的不是语法，而是网格线编号逻辑和隐式轨道的干扰。
grid-column / grid-row 的起止线怎么数
网格线从 1 开始编号，容器左/上边缘是第 1 条线，向右/下依次递增。写 grid-column: 2 / 4 表示从第 2 条竖线开始、到第 4 条竖线结束（即占第 2、3 两列），不是“跨越 4 列”。
- 显式定义了 3 列：
grid-template-columns: 1fr 2fr 1fr→ 共有 4 条竖线（1–4） -
grid-column: 1 / -1是合法的，表示从最左到最右（含所有显式列） - 负值从末尾倒数：
grid-column: -3 / -1在 3 列布局中等价于1 / 3 - 别漏掉 gap：它不产生新轨道，但会影响内容对齐感知——
gap值会撑开网格线间距，但线号不变
span 写法的隐含行为容易翻车
span 看似简单，但它依赖当前“自动放置”的起始位置，而这个位置受 grid-auto-flow、已有元素顺序、甚至 order 影响。
-
grid-column: span 2不等于“固定占两列”，它会先找第一个可用的起始列，再向右占 2 轨道 - 如果前面有
grid-column: 1 / 3的元素，后续span 2可能从第 3 列开始，也可能跳到第 5 列（取决于是否有空隙） - 想强制从某列开始再 span，必须写全：
grid-column: 2 / span 2，否则浏览器按自动流规则算 - 跨行时同理：
grid-row: span 3可能落在隐式行里，导致高度失控——建议显式设grid-auto-rows: minmax(60px, auto)
grid-area 一行写死四条线，适合固定结构
当布局模块稳定（比如仪表盘的 header / sidebar / main / footer），grid-area 比分开写 grid-column + grid-row 更紧凑、不易错位。
立即学习“前端免费学习笔记（深入）”；
- 格式固定为：
grid-area: row-start / column-start / row-end / column-end -
.header { grid-area: 1 / 1 / 2 / 5; }表示占第 1 行、全部 4 列（线 1→5 是 4 条轨道） - 和
grid-template-areas配合时，命名区域本质就是把这组数字映射成可读名，但一旦用了命名，就不能混用线号写法 - 注意：
grid-area是简写，它会覆盖grid-row-start等独立属性，调试时别被 DevTools 里灰掉的属性骗了
子网格（subgrid）不是万能补丁
Subgrid 解决的是“嵌套网格需对齐父级轨道”的问题，但它不能替代跨行跨列本身——它只继承轨道定义，不改变子项的定位能力。
- 要让子项跨父网格的多列，仍得在子容器里用
grid-column，只是此时轨道来自父级，不用重复写grid-template-columns - 目前仅 Firefox 和 Chrome 123+ 支持完整 subgrid，Safari 仍不支持
grid-template-rows: subgrid - 别指望 subgrid 让子项“穿透”父容器去跨更外层的轨道——它只作用于直系父网格
- 兼容性兜底方案仍是传统写法：
grid-column: 1 / -1+ 显式grid-template-columns
最常被忽略的一点：跨行跨列后，justify-self 和 align-self 作用对象是“它自己占据的那个合并单元格”，不是原始单格；如果合并区域内容溢出或对不齐，先检查是不是这个单元格内部的对齐逻辑没理清，而不是急着调 grid-row。
