grid-column和grid-row用线号定位，span为相对跨距；grid-area可简写四值更可靠；响应式需用命名线或负值避免线号失效。
直接用 grid-column 和 grid-row 指定起止线号，或者用 span 关键字声明跨距——不是“合并单元格”，而是“从某条线开始、到某条线结束”。
grid-column: 2 / 4 和 grid-column: span 2 的行为差异
两者视觉上可能一样，但定位逻辑完全不同：
-
grid-column: 2 / 4是绝对定位：强制从第 2 条竖线开始、到第 4 条竖线结束（占第 2、3 两列），不管前面有没有空位 -
grid-column: span 2是相对跨度：先按grid-auto-flow规则找第一个可用起始列（比如第 1 列），再向右占 2 轨道；若第 1 列被占，它可能跳到第 3 列再 span - 想兼顾可控与简洁？写
grid-column: 2 / span 2：明确起点 + 明确跨距，不依赖自动流猜测 -
grid-column: span 2 / 4是无效声明，整条规则会被浏览器丢弃（DevTools 里显示删除线）
grid-area 一行写死四条线更少出错
当布局模块固定（如仪表盘的 header、sidebar、main），grid-area 比分开写 grid-row + grid-column 更紧凑、不易漏项：
-
grid-area: 1 / 1 / 2 / 5等价于grid-row: 1 / 2+grid-column: 1 / 5（即占满第一行全部 4 列） -
grid-area: 2 / 2 / span 2 / span 3表示从第 2 行第 2 列开始，跨 2 行 3 列 - 只写两个值（如
grid-area: 1 / 2）会让缺失的row-end和column-end自动补为auto，不如显式写全可控 -
grid-area是简写，会覆盖grid-row-start等独立属性；调试时 DevTools 里灰掉的属性可能是被它悄悄覆盖了
响应式下线号重排导致跨区错乱
网格线编号不是静态的，它随 grid-template-columns 动态变化：
- 桌面端
grid-template-columns: repeat(4, 1fr)→ 有 5 条竖线（1–5） - 移动端改成
repeat(2, 1fr)→ 只剩 3 条竖线（1–3） - 硬写
grid-column: 1 / 5在移动端会失效（第 5 条线不存在），浏览器可能静默回退到默认位置 - 解决方案：改用命名线（
grid-template-columns: [start] 1fr [main] 1fr [end]），然后子项写grid-column: start / end；或统一用负值（grid-column: 1 / -1）指向隐式末线
真正卡住人的从来不是语法写错，而是线号根本不存在，或者被 gap、隐式轨道、自动流顺序悄悄干扰了起点。动手前先数清容器定义了几条线，比反复调样式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
