grid-column/grid-row失效的根本原因是操作网格线而非格子数，必须显式定义grid-template-rows/columns确保目标线存在；span与线号混用会失效，推荐用命名线提升可维护性。
直接写 grid-column: 1 / span 2 或 grid-row: 1 / 4 很可能不生效——不是语法错，而是网格线根本不存在，浏览器静默忽略。
为什么 grid-column / grid-row 的跨行跨列经常“失效”？
根本原因：CSS Grid 的 grid-column 和 grid-row 操作的是**网格线（grid lines）**，不是“格子数”。这些线必须真实存在，否则声明被丢弃，元素退回默认位置（通常是第一格）。
常见现象包括：
- 写了
grid-row: 1 / 4却只显示一行高 -
grid-column: 2 / span 2跨了但右侧项错位到下一行 - 开发者工具里 Grid overlay 显示不出第 4 条行线
验证方式很简单：打开 DevTools → Elements → 选中容器 → 勾选 “Grid overlay”，看目标线号是否被画出。没画出来，就说明没定义。
必须显式定义 grid-template-rows 和 grid-template-columns
哪怕只是占位，也得提前声明轨道数量和基础尺寸。隐式网格线依赖内容顺序和高度，不可控，拼图布局一碰就乱。
安全写法示例：
.container {
display: grid;
grid-template-columns: [start] 1fr [mid] 1fr [end];
grid-template-rows: repeat(3, minmax(80px, auto));
}
关键点：
-
repeat(3, ...)确保至少有 4 条行线（1→2→3→4），grid-row: 1 / 4才有效 - 用命名线（如
[start]）替代数字编号，响应式切换时更稳定 - 避免只写
grid-auto-rows：它只影响新增的隐式行，对grid-row: 1 / 4这类显式跨行无补救作用
span 和 / 线号混用是维护雷区
grid-column: 2 / span 2 合法；grid-column: span 2 / 4 直接整条规则失效——CSS Grid 语法硬限制，浏览器不报错，但样式不应用。
二者行为本质不同：
-
grid-column: 2 / 4是强约束：强制从第 2 条线开始、到第 4 条线结束，不管前面有没有空 -
grid-column: span 2是弱调度：从当前自动分配的位置起，向右占 2 格；若被占，就后移再占
拼图类布局强烈推荐统一用线号写法（如 grid-row: 1 / 4），避免 DOM 顺序微调就导致整个布局偏移。
响应式拼图：别只改 span，要重定义命名线或轨道数
桌面端 grid-column: start / end 跨两列，移动端想让它只占一列？不能只在媒体查询里改 span 值——因为列数变了，线号语义也变了。
正确做法：
- 用命名线定义结构：
grid-template-columns: [left] 1fr [right] 1fr - 主图写
grid-column: left / right - 断点中改为
grid-template-columns: 1fr，此时left和right合并为同一条线，left / right自动退化为单列
如果坚持用数字线号，断点里必须同步调整 grid-template-columns 的列数，并重新校验所有 grid-row 的终点线是否存在——漏一条，就有一块“飘”出去。
最易被忽略的一点：跨行本身不撑高容器，grid-row: 1 / 4 只是占位，最终高度由 grid-template-rows 或 grid-auto-rows 决定。内容高但轨道矮，就会溢出或裁剪；轨道设成 0px，跨行项直接塌成一条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
