使用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 属性。关键理解“网格线”而不是“网格单元”的概念，就能轻松掌握。不复杂但容易忽略细节。基本上就这些。
