span关键字必须配合起始线使用，单独grid-column: span 3虽合法但起点由Grid自动推断、结果不可控；稳定写法是grid-column: 2 / span 3，表示从第2条列线开始向右跨3列。
grid-column / grid-row 里的 span 关键字怎么写才生效
必须配合起始线（line）使用，span 本身不指定起点，只表示“从当前隐式或显式起点往后跨几格”。单独写 grid-column: span 3 是合法的，但它的起点由 Grid 自动推断（通常是第一个可用的空闲轨道起点），结果不可控。
真正稳定的做法是明确起点 + span：
-
grid-column: 2 / span 3→ 从第 2 条列线开始，向右跨 3 列（占第 2、3、4 列） -
grid-row: 1 / span 2→ 从第 1 行线开始，向下跨 2 行（占第 1、2 行） - 错误写法：
grid-column: span 3 / 5——span只能出现在斜杠右侧，不能倒置
跨多行多列时，grid-area 能不能一步到位
可以，而且更直观。grid-area 是 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的简写，支持 span，但要注意顺序和语法限制：
-
grid-area: 1 / 2 / span 2 / span 3→ 行起/列起/行跨/列跨，等价于grid-row: 1 / span 2; grid-column: 2 / span 3 - 不能混用线号和
span在同一维度里写错位置，比如grid-area: 1 / span 2 / 3 / 4是错的——span必须在终点位置，不能插在中间 - 如果某维不想跨，直接写终点线号，例如
grid-area: 1 / 1 / 2 / span 4（只跨列，行高固定为 1 行）
span 跨越后内容溢出或布局错位的常见原因
表面是 span 没起作用，实际往往是轨道尺寸没撑开，或者内容本身破坏了网格流：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: grid，或漏写了grid-template-columns/grid-template-rows—— 没有显式轨道，span 3会落到隐式网格里，行为难预测 - 跨列项里放了
width: 100%的子元素，而该列轨道是max-content或未设宽，导致子项强行撑宽整行，影响其他项 - 用
span跨越的区域已有其他项占据（且没设z-index或position），浏览器按源码顺序渲染，后写的项可能被遮挡，看起来像“没跨成功”
IE 不支持 span 关键字？那老项目怎么兼容
IE10–11 的旧版 Grid 实现（-ms-grid）压根不认 span，只接受数字线号。想兼容就得放弃 span，改用绝对线号定位：
- 现代写法：
grid-column: 2 / span 3 - IE 兼容写法：
-ms-grid-column: 2; -ms-grid-column-span: 3 - 注意：IE 的
-ms-grid-column-span值是纯数字，不带span关键字；且必须搭配-ms-grid-column使用，不能只写后者 - 如果网格列数动态变化，IE 下无法自动计算终点线号，得靠 JS 补全或预设最大列数
现在大多数项目已放弃 IE，但如果维护老系统，这点绕不开——span 看似方便，但在 IE 里它根本不存在。
