grid-column 可让网格项横跨多列，支持线号（如 2/5）和跨距（如 2/span 3）两种写法，需父容器设 display: grid 并定义列；常用写法包括 1/-1（满行）、span 2（自动起始跨2列）等，超出显式列数时触发隐式网格，可由 grid-auto-columns 控制宽度。
用 grid-column 可以让一个网格项横跨多列，关键在于指定起始线和结束线（或使用跨距语法）。
理解 grid-column 的两种写法
grid-column 是简写属性，等价于 grid-column-start 和 grid-column-end。它支持两种常用形式：
-
线号方式：如
grid-column: 2 / 5;表示从第 2 条列线开始，到第 5 条列线结束（即跨越第 2、3、4 列） -
跨距方式：如
grid-column: 2 / span 3;表示从第 2 条列线开始，向右跨越 3 列（覆盖第 2、3、4 列）
确保父容器是 grid 布局
只有当父元素设置了 display: grid 并定义了列（如 grid-template-columns），grid-column 才会生效：
.container {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 列等宽 */
}子项才能用 grid-column: 1 / -1; 横跨所有列（-1 表示最后一根列线）。
立即学习“前端免费学习笔记（深入）”；
常见跨列场景与写法
实际开发中常用几种简洁表达：
-
grid-column: 1 / -1;—— 跨满整行（从第一列线到最后一列线） -
grid-column: span 2;—— 自动起始，向右跨 2 列（不指定起点，默认按顺序填） -
grid-column: 3 / span 4;—— 从第 3 列开始，跨 4 列（需确保总列数足够，否则会溢出或自动扩展）
注意隐式网格与响应行为
如果跨列超出显式定义的列数（比如 grid-template-columns: 100px 100px; 却写 grid-column: 1 / 5;），浏览器会创建隐式列，宽度默认为 auto。如需控制，可配合 grid-auto-columns：
.container {
grid-auto-columns: 1fr;
}这样跨列超出部分也会按比例分配宽度。
