结论：grid-column和grid-row的start/end语法指定的是真实存在的网格线，而非合并格数；线号不存在时跨行跨列会静默失效，需通过Grid overlay验证或使用负值线（如-1）确保有效性。
直接说结论：用 grid-column 和 grid-row 的 start / end 语法，不是“合并几格”，而是指定“从哪条线开始、到哪条线结束”——线号必须真实存在，否则跨行跨列会静默失效。
grid-column: 2 / 4 和 grid-column: span 2 的区别在哪
表面都占两列，但行为完全不同：
-
grid-column: 2 / 4是绝对定位：强制卡在第 2 条列线到第 4 条列线之间，不管前面有没有空位，也不管其他项怎么排 -
grid-column: span 2是相对跨度：从当前自动分配的位置（比如第 1 格）开始向右占 2 格；若该位置已被占，Grid 会找下一个可用起始点再span -
grid-column: 2 / span 2合法，表示“从第 2 列线开始，向右跨 2 格”；但grid-column: span 2 / 4无效，会被整个丢弃
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-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-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定义，拼错或未定义就静默失效，不如线号直接
真正难的不是写法，而是理解线号是“真实存在的物理分隔线”，不是抽象概念。每次写 / 前，先问自己：这条线，浏览器真画出来了吗？
