直接写grid-column和grid-row就能跨，但必须理解它们操作的是“线号”而非“格数”；线不存在则跨失效，grid-column:2/4是绝对定位卡位，span 2是相对跨度自动寻位，grid-area四值简写更可靠。
直接写 grid-column 和 grid-row 就能跨，但必须理解它们操作的是“线号”，不是“格数”——线不存在，跨就静默失效。
grid-column: 2 / 4 和 grid-column: span 2 到底差在哪
表面都占两列，但定位逻辑完全相反：
-
grid-column: 2 / 4是绝对定位：强制卡在第 2 条列线到第 4 条列线之间，不管前面有没有空位、其他项怎么排 -
grid-column: span 2是相对跨度：从 Grid 自动分配的起始位置（比如第 1 格）开始向右占 2 格；若该位置已被占，它会找下一个可用起点再span -
grid-column: 2 / span 2合法，表示“从第 2 列线开始，向右跨 2 格”（终点是第 4 线） -
grid-column: span 2 / 4无效，整个声明会被浏览器丢弃（DevTools 中显示为删除线）
grid-row: 1 / 4 不生效？先确认这三件事
语法没错却没效果，大概率是线号压根没生成：
- 检查父容器是否定义了
grid-template-rows——没它，浏览器只按内容生成隐式行，grid-row: 1 / 4中的“第 4 条线”可能根本不存在 - 打开开发者工具 Elements 面板，开启 Grid overlay，确认目标线号是否真实画出
- 避免硬写大数字（如
grid-row: 1 / 99），改用grid-row: 1 / -1更可靠，-1指容器末尾那条线，始终存在
为什么 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-template-columns 或 grid-template-rows 显式生成，或由浏览器隐式扩展规则支撑；一旦线号失效，跨行跨列就变成幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
