如何在CSS中实现Grid元素跨行跨列_grid-row-span grid-column-span

使用grid-column和grid-row通过网格线控制跨列跨行，如grid-column:1/3表示从第1列线到第3列线跨越2列，配合span可实现从某位置跨越指定数量行列。

在CSS Grid布局中，让元素跨行或跨列并不使用 grid-row-span 或 grid-column-span 这样的属性——实际上这些属性并不存在。真正用于实现跨行跨列的是 grid-row 和 grid-column，或者更底层的 grid-row-start、grid-row-end、grid-column-start、grid-column-end。

使用 grid-column 和 grid-row 实现跨列跨行

最简洁的方式是通过 grid-column 和 grid-row 合并写法来指定元素占据的范围。

例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 50px);
}
.item {
grid-column: 1 / 3; / 从第1列开始，跨越到第3列（占2列） /
grid-row: 1 / 4;    / 从第1行开始，到第4行前（占3行） /
}

上面代码中，1 / 3 表示“起始线为1，结束线为3”，所以该元素横跨两列。同理，1 / 4 让它竖跨三行。

使用 start 和 end 属性精确控制

如果你需要更清晰地分开定义起始和结束位置，可以使用四个独立属性：

• grid-column-start：列起始线
• grid-column-end：列结束线
• grid-row-start：行起始线
• grid-row-end：行结束线

示例：

.item {
  grid-column-start: 2;
  grid-column-end: 4; /* 跨两列 */
  grid-row-start: 2;
  grid-row-end: 3;    /* 占一行高度，但从第2行开始 */
}

使用 span 关键字简化跨格

想让一个元素从当前位置开始，跨越指定数量的行或列，可以用 span。

比如：

.item {
  grid-column: 2 / span 2; /* 从第2列开始，跨2列 */
  grid-row: 1 / span 3;    /* 从第1行开始，跨3行 */
}

这种写法特别适合动态布局，不需要提前知道结束网格线编号。

基本上就这些。用 grid-column 和 grid-row 配合 / 和 span 就能灵活控制元素跨越行列，无需所谓的 grid-row-span 属性。关键理解“网格线”而不是“网格单元”的概念，就能轻松掌握。不复杂但容易忽略细节。基本上就这些。