grid-column: span 2有时只跨一列，是因为起点位置（如第3条线）加跨度超出显式列轨道总数（如4条线），导致终点被截断至末线；若父容器未设grid-template-columns，则无列宽基准，span无法计算而退化为span 1。
因为 span 不是“占满可用空间”，而是“从起点开始数 N 条轨道”；起点错、轨道数少、隐式网格干扰，都会导致视觉上“撑出边界”或“卡在半路”。
grid-column: span 2 为什么有时只跨一列？
它不是按“容器宽度”算的，而是按“当前起点所在位置 + 显式定义的列轨道数”算的：
- 起点由
grid-column-start决定，默认是auto，由 Grid 自动分配——可能落在第 3 条线（即倒数第二列），此时span 2最多只能到第 4 条线，只剩一列可跨 - 父容器没设
grid-template-columns，只有grid-auto-columns或靠内容撑开，浏览器无法确定“一列”有多宽，“span 2”就无基准可依，常退化为span 1 - 用了
grid-template-columns: repeat(3, 1fr)→ 共 4 条竖线（1–4），span 2在第 3 条线起始时，终点是第 4 条线，实际只跨 1 列轨道
grid-row: span 3 撑高整行甚至溢出容器
这是隐式网格在作祟：当元素被分配到尚未定义的行区域时，Grid 会创建隐式行，其高度默认由内容决定，不受控：
-
grid-row: span 3若起点在最后一行附近，终点会落到隐式行中，而隐式行高度 = 内容最小固有高度，可能远超预期 - 没设
grid-auto-rows，浏览器对隐式行高度无约束，文字多、图片大、内边距厚都会直接撑开 - 更危险的是：只要一个元素跨行，它所在的**所有行轨道**（包括同行其他未跨行项）都会被拉成统一高度，造成大面积错位
响应式下 span 突然错位或溢出
span 是绝对轨道数，不随布局缩放重算。媒体查询改了列数，但 span 还在硬数旧轨道：
- 桌面端
grid-template-columns: repeat(4, 1fr)→ 5 条线，span 2跨两列没问题 - 移动端切到
repeat(2, 1fr)→ 只剩 3 条线，原span 2若从第 2 条线起始，终点就是第 3 条线，视觉上“卡中间”，还可能因内容过宽而溢出容器 - 用
grid-column: -1 / -1或命名线（如grid-column: sidebar-start / sidebar-end）才能真正适配变化后的轨道结构
调试时怎么确认 span 是否真生效？
别信眼睛，看计算样式：
- 打开 DevTools → Elements → 选中元素 → Computed → 找
grid-column-start和grid-column-end - 如果显示
auto / auto或1 / 2，说明span没触发；正确应为类似2 / 4（表示跨第 2→4 条线，即两列） - 若看到
grid-area被设过，它会覆盖所有独立grid-column声明，此时单独改span无效
真正难的不是写对 span，而是控制它的起点和所处的轨道上下文——线号会变、隐式行不可见、响应式会重排，这些都比语法本身更容易让布局失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
