CSS Grid 布局是一种最近流行的前端布局方式，它提供了一种非常灵活的方法来控制网格布局。而 grid-template-rows 属性是 CSS Grid 布局中一个非常重要的属性，可以控制网格中行的数量和大小，使布局更加自由灵活。在本文中，我们将会介绍 grid-template-rows 属性在 CSS Grid 布局中的作用以及如何使用它去控制列数。
grid-template-rows 属性的基本语法
在 CSS Grid 布局中，grid-template-rows 属性可以用来定义网格中行的数量、大小、位置以及间距。其基本语法如下：
grid-template-rows: <track-size> <track-size> ...;
其中，<track-size> 可以是一个具体长度值，也可以是一个百分比；同时也可以使用特定的关键字，例如 auto 或 minmax()，用于指定行的大小。
下面，我们来看一些具体的示例，以便更好地理解 grid-template-rows 属性。
控制行数，设置固定高度
当使用 grid-template-rows 属性时，可以将网格布局中的行分成多个等高或不等高的行。例如，下面的代码将网格分成了3个不等高的行。第一行的高度为 3fr，第二行为 1fr，第三行为 2fr。
.container {
display: grid;
grid-template-rows: 3fr 1fr 2fr;
}使用这样的方式通常是为了在网站内设置固定的行数，从而更好地控制布局。
控制行数，自适应高度
在 CSS Grid 布局中，上面所述的一种固定高度的方法并不是唯一的。还有一种方法能够让行高度自适应与内容高度，从而可以实现更灵活的布局。使用 grid-template-rows 属性，可以将行的大小设置为 auto。这样行将会根据内容的高度自适应调整高度。
.container {
display: grid;
grid-template-rows: auto auto auto;
}当您想要让每行的高度自动适应其内容时，这是一种非常实用的方法。
控制行数，使用 minmax() 设置最大和最小高度
通过使用 minmax() 函数和 grid-template-rows 属性，您可以轻松地为行设置一个最小和最大高度，使它们在布局时更加灵活。
下面是一个示例，在这个示例中，第一行有一个最小值为 100px, 最大值为 auto，第二行的高度是 2.5em，第三行的最小值为 100px，最大值为 200px。
.container {
display: grid;
grid-template-rows: minmax(100px, auto) 2.5em minmax(100px, 200px);
}结论
在本文中，我们了解了 grid-template-rows 属性在 CSS Grid 布局中的使用方法。通过设置不同的值，您可以灵活地控制网格布局中每一行的高度和数量。这是一个非常实用的技术，可以为您的布局提供更多的灵活性和自由度。在下一次您需要使用 CSS Grid 布局时，请尝试使用 grid-template-rows 属性来控制行的数量，以获得最佳结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f9df6e9a7045d0d74d5ad