网格线从1开始编号，左/上边缘为第1条线，向右/下递增；grid-column: 2/4表示占第2、3列，非跨4列；负值从末尾倒数，如3列布局中grid-column: -3/-1等价于1/3；span不可与/混用，如grid-column: 2/span 3无效。
grid-column 和 grid-row 的线号怎么数才不翻车
网格线从 1 开始编号，容器左边缘是第 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。
常见错误现象：grid-column: 2 看起来像“放在第 2 列”，其实它等价于 grid-column: 2 / 3 ——只跨 1 格；想跨 2 列必须写 grid-column: 2 / 4。gap 不产生新轨道，但会撑开线间距，线号不变，容易误导对齐感知。
span 写法为什么经常失效或错位
grid-column: span 2 不等于“固定占两列”，它先找第一个可用起始列，再向右占 2 轨道。这个起始位置受 grid-auto-flow、已有元素顺序、甚至 order 影响。前面若有 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-column: 2 / span 3 是无效声明，会被整个丢弃（DevTools 显示 strike-through），span 和 / 语法不能混用。
grid-area 怎么用才不容易出错
grid-area 是一行写死四条线的简写：grid-area: row-start / col-start / row-end / col-end，顺序不能错。适合结构稳定模块（如仪表盘的 header / sidebar / main / footer），比分开写 grid-column + grid-row 更紧凑、不易错位。
配合 grid-template-areas 命名区域时，本质是把这组数字映射成可读名，但一旦用了命名，就不能混用线号写法。注意：grid-area 是简写，会覆盖 grid-row-start 等独立属性，调试时别被 DevTools 里灰掉的属性骗了。
为什么 grid-row: 2 / 4 有时不生效
根本原因：没显式定义行轨道（grid-template-rows），浏览器按内容自动分配高度，“第 4 条线”可能根本不存在。Grid 的线号依赖你声明的轨道数量或隐式网格扩展规则。
检查开发者工具 Elements 面板的 Grid overlay，看目标线号是否真实存在。避免依赖未声明的线号，比如 grid-row: 1 / 5 在只有 2 行内容时大概率失效。grid-row: 1 / -1 比硬写大数字更可靠，尤其用于全高覆盖。
真正卡住人的不是语法，而是网格线编号逻辑和隐式轨道干扰——动手前先确认 grid-template-rows 是否兜得住，再看元素默认放置位置是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
