CSS Grid 布局是一种强大的布局方式，它能够轻松地创建复杂的布局结构。在 CSS Grid 布局中，grid-template-rows 属性可以定义网格行的大小和数量。本文将深入介绍如何使用 grid-template-rows 属性。
grid-template-rows 的语法
grid-template-rows 属性用于定义网格行的大小和数量。它的语法如下：
grid-template-rows: <track-size> | <line-name> <track-size> | <line-name> <track-size> / <line-size> | <line-name> <track-size> / <line-size> <line-name> <track-size>
其中，<track-size> 可以是一个长度值、百分比值、fr 单位或 minmax 函数；<line-name> 是一个自定义的行名称，<line-size> 可以是一个长度值或百分比值。
定义行的大小和数量
可以使用 grid-template-rows 属性直接定义行的大小和数量。例如，我们定义一个有 3 个行的网格：
.grid {
display: grid;
grid-template-rows: 100px 200px 300px;
}这里我们分别定义了三行的高度为 100px、200px 和 300px。同样地，我们也可以使用百分比、fr 单位或 minmax 函数来定义行的大小，例如：
.grid {
display: grid;
grid-template-rows: 20% 2fr minmax(100px, auto);
}这里我们使用了百分比、fr 单位和 minmax 函数，分别代表了第一行的高度为整个网格高度的 20%、第二行的高度是第一行高度两倍的 fr 单位和第三行的高度在 100px 和自适应高度之间。
使用行名称
在 CSS Grid 布局中，每一行和每一列都可以用一个名称来标识。可以使用 grid-template-rows 属性来为每一行设置名称，如下所示：
.grid {
display: grid;
grid-template-rows: header 100px main 1fr footer 50px;
}这里我们分别为第一行、第三行和第五行定义了名称 header、main 和 footer。这样我们在定义元素的位置时，就可以使用这些行名称来表示元素的位置：
-- -------------------- ---- ------- ------- - --------------- ------- ------------- ----- - ----- - --------------- ----- ------------- ------- - ------- - --------------- ------- ------------- -------- -
这里我们使用了 grid-row-start 和 grid-row-end 属性来定义元素的位置，其中第一个属性指定元素的起始行，第二个属性指定元素的结束行，这些行都是使用名称来标识的。
使用行的长度和数量
在有些情况下，我们可能需要为某些行设置一个长度和数量，而对于其他行，则使用剩余的空间。这时，我们可以使用 grid-template-rows 属性的斜线 / 来定义行的长度和数量的情况。例如：
.grid {
display: grid;
grid-template-rows: 1fr 100px 2fr / 50px 100px;
}这里我们分别使用了两个斜线 /，第一个斜线表示前三行的高度比例为 1:1:2；第二个斜线表示我们在前两列上分别定义了两个固定的宽度，而第三列将使用剩余的空间。
总结
通过本文的学习，相信大家已经了解了在 CSS Grid 布局中如何使用 grid-template-rows 属性，包括定义行的大小和数量、使用行名称和使用行的长度和数量。希望这些知识点可以帮助大家更好地使用 CSS Grid 布局来创建复杂的布局结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b365f848841e9894faa6c7