grid-column跨列必须显式指定起止线，仅写span 2无效；推荐用具体线号如2/4或命名线，避免依赖自动布局导致不可控。
grid-column 跨列必须显式指定起止线
只写 grid-column: span 2 是不够的，浏览器无法自动推断从哪开始跨。你得明确告诉它起点和终点，比如 grid-column: 2 / 4 表示从第 2 条网格线开始、到第 4 条网格线结束（即跨过第 2、第 3 列）。
常见错误是写成 grid-column: 1 / span 2 —— 这在部分浏览器里不被支持，css Grid 规范只允许 span N 出现在第二个位置（即 grid-column: auto / span 2），且 auto 依赖于隐式定位逻辑，容易失控。
- 推荐写法：用具体线号，如
grid-column: 2 / 4或grid-column: 1 / -1（跨满整行） - 若列数动态变化，可用命名线：
grid-template-columns: [start] 1fr [middle] 1fr [end];<br>grid-column: start / end; - 负索引从右往左数，
-1是最右侧那条线，不是最后一列的起始线
grid-column: span N 的行为取决于起始位置
grid-column: span 2 看似简单，但它实际含义是“从当前自动分配的位置向右跨 2 格”。这个“当前位置”由 Grid 自动布局规则决定，可能受 grid-auto-flow、相邻元素、甚至 grid-row 设置影响，结果不可控。
- 在
grid-auto-flow: row（默认）下，元素按行顺序填入，span 2会从它本该落下的那一格开始跨 - 如果前面有已定位元素占位，它可能被挤到下一行，再跨列——这往往不是你想要的
- 想稳定跨列？放弃
span，直接用线号定位：grid-column: 3 / span 2是合法的，但等价于grid-column: 3 / 5，不如写死更清晰
跨列元素会破坏后续元素的自动流布局
一旦某个元素用了 grid-column: 2 / 4，它占据的是第 2、3 列的全部高度。后面没指定位置的元素不会“绕开”它，而是继续按行顺序往下排，可能出现在第 1 列第 2 行，也可能跳到第 4 列——取决于 grid-auto-flow 模式。
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-flow: row：后续元素优先填满当前行剩余列，再换行 -
grid-auto-flow: column：后续元素优先往下填同一列，容易导致错位 - 避免意外：给所有关键元素都显式设置
grid-column和grid-row，别依赖自动流
响应式跨列要小心线号失效
用数字线号（如 grid-column: 1 / 4）在媒体查询里改 grid-template-columns 后，原有线号可能不存在了。比如原为 repeat(3, 1fr) 有 4 条线，改成 repeat(2, 1fr) 就只剩 3 条线，1 / 4 会回退到 1 / 3 或直接失效。
- 方案一：用命名线 +
grid-area，统一管理区域名 - 方案二：媒体查询内重写整个
grid-column，例如：@media (max-width: 768px) {<br> .hero { grid-column: 1 / -1; }<br>} - 方案三：用
grid-column: 1 / -1配合grid-template-areas，语义更稳
跨列本身不难，难的是跨得可控。线号不是“数字编号”，而是网格容器上真实存在的分隔标记；漏掉起点或终点，或者指望 span 在复杂布局里智能对齐，大概率会卡在调试环节。