grid-column: span 2 是最直接安全的跨两列写法，它相对定位、自动适配列数变化，而数字线号绝对定位易错位；需注意隐式轨道撑宽和ie不支持问题。
grid-column: span 2 是最直接的写法
想让一个 grid 子项横跨两列，grid-column: span 2 就够了，不需要算起始线编号。它会自动从当前默认列位置开始，向右占满 2 列轨道。
常见错误是硬写 grid-column: 1 / 3——这看似等价，但一旦前面插入新元素、或使用 grid-auto-flow: dense，起始线就可能偏移，导致错位。
-
span是相对定位，安全；数字线号是绝对定位，脆弱 - 如果父容器列数不固定（比如用
repeat(auto-fit, minmax(200px, 1fr)))），只有span能可靠工作 -
span后面跟的数字必须是整数，不能是span 1.5或span auto
grid-column 与 grid-area 的区别别搞混
grid-column 只控制列轴范围，不影响行；grid-area 是四值缩写（row-start / column-start / row-end / column-end），能同时跨行跨列。别为了跨列去滥用 grid-area。
典型误用：写成 grid-area: 1 / 1 / 2 / 3 来实现跨两列——语法没错，但语义冗余，可读性差，维护时容易看漏行相关参数。
- 纯跨列 → 用
grid-column: span N - 需要同时跨行+跨列 → 才用
grid-area -
grid-area的值如果是单个标识符（如grid-area: header），那是在命名区域，和跨列无关
span 在隐式网格中可能意外撑宽容器
当子项用 grid-column: span 3，但父容器只定义了 2 列（比如 grid-template-columns: 1fr 1fr），浏览器会自动创建第 3 列（隐式轨道），并按 grid-auto-columns 的值分配宽度——这常导致布局突然变宽，超出预期。
现象：卡片布局里某个标题突然把整行拉长，右侧出现滚动条。
- 默认
grid-auto-columns: auto，新列宽由内容撑开，不可控 - 加一句
grid-auto-columns: 1fr或grid-auto-columns: 0（配合minmax()）能约束行为 - 更稳妥的做法是提前规划列数，或用
grid-template-columns: repeat(3, 1fr)显式声明
IE 不支持 span 关键字，但你可能根本不用管
IE10/11 的 -ms-grid-column-span 只接受数字，不支持 span。但如果你还在兼容 IE，整个 Grid 布局本身就得降级为 Flex 或 float，span 是否支持已不是关键问题。
真正要注意的是：现代项目若用 PostCSS autoprefixer，它不会给 span 加 IE 前缀——因为 IE 的 Grid 实现和标准完全不兼容，加了也无效。
- 别指望 autoprefixer “修复”
span兼容性 - 如果必须支持 IE，跨列逻辑应改用
colspan（表格）或 Flex 包裹（flex-basis: 200%类似模拟） - 现在绝大多数场景下，
grid-column: span 2可以放心写
跨列看着简单，但 span 的“相对性”和隐式轨道的“自动性”叠加后，很容易在响应式或动态插入内容时翻车。盯住父容器的列定义是否稳定，比死记语法更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
