用 grid-column 和 grid-row 的 span 语法最可控，但必须配合显式定义的网格线编号（即设置 grid-template-rows 和 grid-template-columns），否则跨行跨列会“飘”——尤其在内容高度不一致时容易错位。
直接说结论：用 grid-column 和 grid-row 的 span 语法最可控，但必须配合显式定义的网格线编号（即设置 grid-template-rows 和 grid-template-columns），否则跨行跨列会“飘”——尤其在内容高度不一致时容易错位。
为什么 grid-column / grid-row 的 span 值有时不生效？
常见现象是写了 grid-column: 1 / span 2 却没跨列，或者跨了但后续项挤到奇怪位置。根本原因是：未定义显式网格轨道，浏览器按“自动定位算法”分配隐式网格线，span 只能作用于已存在的线（或自动创建的隐式线），而隐式线的位置依赖内容尺寸和顺序，不可预测。
- 必须提前用
grid-template-columns和grid-template-rows定义至少基础轨道（哪怕用minmax(0, 1fr)占位） - 若子项有固定宽高，但父容器未设
grid-auto-rows或grid-auto-columns，跨行后空出的轨道高度可能为 0，导致重叠 -
span 2是从“起始线”往后数 2 条线，不是占 2 格内容宽度——线数 ≠ 列数，尤其当某列被设为2fr时，它仍只算 1 条线
拼图布局中 grid-row 跨行的典型陷阱
拼图效果常需某个块垂直拉伸（比如左侧主图跨 3 行），但紧邻右侧的几个小块却因自动定位“掉”到第 4 行去。这不是 bug，是 Grid 的默认 grid-auto-flow: row 在起作用：它优先填满当前行，再换行，而跨行项不占用后续行的“槽位”，但会影响该行内其他项的对齐基线。
- 加
grid-auto-flow: dense可让后续小项“插空”，但可能打乱 DOM 顺序渲染逻辑，慎用于语义化要求高的区域 - 更稳的做法：给所有拼图项显式指定
grid-row起始线，例如grid-row: 1、grid-row: 1 / span 3、grid-row: 2，强制它们落在预期行区间 - 避免混用
span和/线号写法（如grid-row: 2 / 4和grid-row: 2 / span 2），二者等价但混合易引发维护困惑
响应式拼图：如何让跨列行为随断点变化？
桌面端一个大图 grid-column: 1 / span 2，移动端希望它只占 1 列。不能只改 span 值，因为列数本身变了——如果 grid-template-columns: repeat(4, 1fr) 在移动端变成 repeat(2, 1fr)，原 span 2 就会撑满全宽，但起始线编号可能偏移。
- 推荐用命名线（named lines）替代数字编号：
grid-template-columns: [start] 1fr [mid] 1fr [end]，然后子项写grid-column: start / end，断点里只需改命名线位置，不用动子项规则 - 若坚持用数字线，断点中必须同步更新
grid-template-columns和所有子项的grid-column值，否则线号错位会导致跨列失效 - 注意
grid-column: span 2在单列容器（grid-template-columns: 1fr）下会无效——没有第 2 条线可 span，此时浏览器降级为span 1
真正难的不是写对那几行 grid-column，而是想清楚：你依赖的是“绝对线号”还是“相对跨度”，以及是否所有断点下的轨道定义都覆盖了这些线。一旦开始用 span，就得对网格容器的轨道生成逻辑有完整掌控，否则拼图就真成“拼运气”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
