CSS Grid 布局元素横跨两列

grid-column

grid-column: 2 / span 2;

grid-column: span 2; /* 跨两列 */

等价写法

grid-column-start: auto;
grid-column-end: span 2;

注意：span只能用于grid-column、grid-column-end或grid-row-end，表示相对跨度。

含义

grid-column: 2 / span 2;：意思是从第2列开始，跨2列。

grid-column: 1 / -1;表示：从第1条列网格线开始（左边界）到最后一条列网格线结束（右边界）

-1是一个特殊值，表示最后一条网格线，类似于数组的负索引。

其他常见写法

• grid-column: 2 / 4;：从第2条线到第4条线（跨 2 列）
• grid-column: span 3;：从当前位置跨3列
• grid-column: 1 / span 2;：从第1条线开始，跨2列

区别解析

• grid-column: 1 / 2;：从第1条网格线开始，到第2条网格线结束。只占 1 列。
• grid-column: 1 / span 2;：从第1条网格线开始，跨越2列。结束线是第3条网格线（因为跨了两列）。