必须显式定义网格线，否则grid-column和grid-row会静默失效；根本原因是父容器未声明grid-template-columns，导致依赖的列线不存在；安全做法是至少设置grid-template-columns产生明确列线。
必须显式定义网格线，否则 grid-column 和 grid-row 会静默失效——元素看起来“没跨”，其实是规则被浏览器直接丢弃了。
为什么写了 grid-column: 1 / 3 却不跨列
根本原因：父容器没声明 grid-template-columns，导致只有隐式列线（数量不可控、位置不固定）。比如只写 display: grid，但没设列轨道，那 1 / 3 所依赖的第3条列线很可能根本不存在。
- 打开 DevTools → Elements → 选中容器 → 勾选 “Grid overlay”，看目标线号是否实际画出
- 安全做法是至少声明基础结构：
grid-template-columns: 1fr 1fr 1fr（产生4条列线：1–4） -
gap不生成新线，只撑开间距；线号始终从 1 开始，负值倒数（-1指最右/最下那条隐式线）
span 写法为何经常“跳着占位”
span 是相对起点的偏移量，不是绝对坐标。它依赖 Grid 自动放置算法（grid-auto-flow）和已有元素顺序，起点可能被前面的跨格元素挤走。
-
grid-column: span 2：从当前自动分配的位置向右占2格，若该位置已被占，就往后找空位再 span - 想强制从第2列开始跨2列，必须写全：
grid-column: 2 / span 2 -
grid-column: span 2 / 4是非法语法，整条规则被丢弃（DevTools 中显示删除线） - 跨行时若高度塌陷，大概率是
grid-template-rows缺失或设得太小；建议用minmax(60px, auto)约束隐式行
用 grid-area 替代分开写更可靠
当模块位置固定（如 header、sidebar），grid-area 一行写死四条线，避免漏写或顺序错乱，也更易读。
-
grid-area: 1 / 2 / 3 / 4等价于grid-row: 1 / 3+grid-column: 2 / 4 - 支持
span：grid-area: 2 / 1 / span 2 / span 3表示从第2行第1列起，跨2行3列 - 注意：
grid-area是简写，会覆盖grid-row-start等独立属性；调试时 DevTools 里灰掉的属性可能是被它覆盖了
响应式下线号错乱怎么办
线号不是静态数字，它随 grid-template-columns 动态重排。桌面端 repeat(4, 1fr) 有5条列线（1–5），移动端改成 repeat(2, 1fr) 就只剩3条（1–3）——硬写的 1 / 4 在移动端直接失效。
- 优先用命名线：
grid-template-columns: [start] 1fr [mid] 1fr [end]，然后子项写grid-column: start / end - 或改用负值：
grid-column: 1 / -1（始终铺满）或grid-column: -3 / -1（倒数第3条到末线） - 避免在媒体查询里重复写相同数字线号；结构变化大时，干脆重定义
grid-area命名区域
真正卡住人的从来不是语法记不住，而是线号看不见、隐式轨道摸不着、响应式一换就断连。动手前先开 Grid overlay 看一眼线，比查十遍文档都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
