grid-column或grid-row跨列跨行操作的是线号而非格数，线不存在则跨失效；绝对定位（如2/4）与相对跨度（如span 2）逻辑相反；线号需由grid-template-*显式生成或隐式存在，否则声明静默失效。
直接写 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-column 和 grid-row 容易漏掉某一项，导致项目回退到默认位置：
立即学习“前端免费学习笔记（深入）”；
-
grid-area: 2 / 1 / 4 / 3等价于grid-row: 2 / 4+grid-column: 1 / 3，四值一次写全，逻辑清晰 - 只给两个值（如
grid-area: 1 / 2），缺失的row-end和column-end会按规则补为auto，不如显式写全可控 - 命名区域（如
grid-area: header）依赖父级grid-template-areas定义，拼错或未定义就静默失效，不如线号直接
响应式下跨列错乱的根本原因
线号不是静态编号，它随 grid-template-columns 动态重排：
- 桌面端
grid-template-columns: repeat(4, 1fr)→ 有 5 条竖线（1–5） - 移动端改成
repeat(2, 1fr)→ 只剩 3 条竖线（1–3） - 原来写的
grid-column: 2 / 5在移动端直接越界，回退到默认位置 - 解决方案：媒体查询里同步调整
grid-template-columns和grid-column，或改用命名线 / 负值线（如grid-column: 2 / -1）
真正难的不是写法，而是理解线号是“真实存在的物理线”——它不因你写了就存在，得靠 grid-template-* 或浏览器隐式生成来支撑；一旦线号失效，跨行跨列就变成幻觉。
