在css网格布局的开发场景中，经常会有让某个网格项占据多行空间的需求，比如让侧边栏模块贯穿整个内容区域的高度，或者让标题模块覆盖多行内容区域。这种跨行效果可以通过grid row相关属性快速实现，不需要额外嵌套布局容器。
grid row属性基础说明
grid row是用来定义网格项在网格行方向上的位置和跨度的属性，它是grid-row-start和grid-row-end两个属性的简写形式。其中grid-row-start指定网格项开始的行线位置，grid-row-end指定网格项结束的行线位置。
网格的行线是从上到下依次编号的，第一条行线编号为1，之后每增加一行就增加一条行线，比如3行的网格会有4条行线。我们可以通过行线编号来精确控制网格项的跨行范围。
跨行设置的具体方式
1. 使用grid-row简写设置跨行
grid-row的语法格式为grid-row: start-line / end-line，其中start-line是开始行线，end-line是结束行线。如果只设置一个值，默认表示grid-row-start，此时grid-row-end会默认取默认值span 1，也就是只占据1行。
以下是一个3行2列的网格布局示例，让第一个网格项跨2行：
/* 定义网格容器 */
.container {
display: grid;
/* 定义3行，每行高度100px */
grid-template-rows: repeat(3, 100px);
/* 定义2列，每列宽度1fr */
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* 第一个网格项跨2行 */
.item1 {
grid-row: 1 / 3;
background-color: #f0f0f0;
}
.item2 {
background-color: #e0e0e0;
}
.item3 {
background-color: #d0d0d0;
}
.item4 {
background-color: #c0c0c0;
}
.item5 {
background-color: #b0b0b0;
}
对应的html结构如下：
<div class="container">
<div class="item1">跨2行的模块</div>
<div class="item2">模块2</div>
<div class="item3">模块3</div>
<div class="item4">模块4</div>
<div class="item5">模块5</div>
</div>
2. 使用span关键字设置跨行数量
如果不想计算结束行线的编号，可以使用span关键字直接指定跨行的数量。语法为grid-row: start-line / span row-count或者grid-row: span row-count / end-line。
以下示例让第二个网格项从行线2开始，跨3行：
.container {
display: grid;
grid-template-rows: repeat(4, 80px);
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item2 {
/* 从行线2开始，跨3行，会覆盖行线2到行线5的范围 */
grid-row: 2 / span 3;
background-color: #f5f5f5;
}
3. 单独设置grid-row-start和grid-row-end
如果需要更灵活的控制，也可以单独设置两个属性：
.item3 {
/* 开始行线是1 */
grid-row-start: 1;
/* 结束行线是4，也就是跨3行 */
grid-row-end: 4;
background-color: #eee;
}
跨行设置的注意事项
- 设置的结束行线编号不能超过网格的总行线数量，否则会导致布局异常，网格项可能会超出容器范围。
- 如果多个网格项设置了跨行，需要注意它们是否会发生重叠，重叠的网格项默认后面的会覆盖前面的，除非设置了
z-index属性。 - 当网格容器设置了
grid-auto-rows属性时，即使设置的结束行线超出了已有的行线范围，网格容器也会自动创建隐式行来容纳网格项。
常见问题解答
跨行后网格项高度如何计算
网格项的高度会自动等于它所跨越的所有行的高度之和，加上行之间的gap值的总高度。比如跨2行，每行高度100px，gap为10px，那么网格项高度就是100*2 + 10 = 210px。
能否同时设置跨行和跨列
可以，只需要同时设置grid row和grid column属性即可，两者互不冲突。比如grid-row: 1 / 3; grid-column: 1 / 3;就可以让网格项跨2行2列。