使用 grid-row 和 grid-column 配合 span 可实现子元素跨行跨列，如 grid-row: 2 / span 2；也可用 grid-area 简写，如 grid-area: 1 / 2 / span 2 / span 3，灵活控制布局范围。
在 CSS Grid 布局中，让子元素跨越多行或多列是常见需求。实现这一效果的关键属性是 grid-row 和 grid-column，而所谓的“grid-row-span”或“grid-column-span”并不是标准属性名，但可以通过 span 关键字来实现跨行跨列的效果。
使用 grid-row 和 grid-column 实现跨行跨列
CSS Grid 中并没有独立的 grid-row-span 或 grid-column-span 属性，但可以在 grid-row 和 grid-column 中使用 span 来指定跨越的轨道数量。
语法格式如下：
- grid-row: / span ;
- grid-column: / span ;
例如，让一个子元素从第2行开始，跨越2行：
.item {
grid-row: 2 / span 2;
}
这表示该元素从第2行开始，占据2行的高度（即覆盖第2行和第3行）。
简写形式：grid-area
如果需要同时设置行列的起始位置和跨度，可以使用 grid-area 简写属性。
语法为：
grid-area:/ / / ;
也可以结合 span 使用：
- grid-area: 1 / 2 / span 2 / span 3; —— 从第1行第2列开始，跨2行3列
- grid-area: span 2 / span 2; —— 自动放置，但占据2行2列空间
实际示例
假设有一个 3×3 的网格布局：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
}
.box1 {
grid-column: span 2;
grid-row: span 2;
background: lightblue;
}
上面的 .box1 会从默认起点开始，横向跨越2列，纵向跨越2行，占据左上角的 2×2 区域。
基本上就这些。通过 span 配合 grid-row、grid-column 或 grid-area，就能灵活控制子元素的跨行跨列布局，无需所谓“grid-row-span”这样的非标准属性。不复杂但容易忽略细节。
