CSS Grid 是一种用于设计网格布局的 CSS 模块。与传统的 CSS 布局相比，它具有更强大和灵活的功能。在 CSS Grid 中，我们可以轻松地定义行和列，将页面划分为多个区域，并通过各种属性来控制这些区域之间的间距和位置。
在 CSS Grid 中，我们使用 grid-template-rows 属性来定义网格的行高。这个属性非常灵活，可以用各种方式指定行高。本文将介绍如何使用 grid-template-rows 属性来控制网格行的高度，并包含示例代码。
基本用法
grid-template-rows 属性是用来指定网格行高的。它采用一组值，每个值代表一行的高度。例如，我们可以用以下代码定义一个包含 3 行的网格，其中第一行的高度为 100 像素，第二行的高度为 200 像素，第三行的高度为 300 像素：
.grid {
display: grid;
grid-template-rows: 100px 200px 300px;
}当我们将此代码应用于一个容器元素时，我们将得到一个包含三行的网格，每行分别具有不同的高度。例如，如果我们在 grid 容器中添加一些子元素，它们将根据网格的行高进行布局：
<div class="grid"> <div class="item-1">Item 1</div> <div class="item-2">Item 2</div> <div class="item-3">Item 3</div> </div>
接下来，让我们看一下其他几种定义行高的方式。
指定行高单位
我们可以使用各种单位来指定行高。例如，我们可以将行高以像素为单位指定：
.grid {
display: grid;
grid-template-rows: 100px 200px 300px;
}或者我们可以使用百分比来指定行高，比如将第一行的高度设置为容器高度的 25%：
.grid {
display: grid;
grid-template-rows: 25% 200px 300px;
}我们还可以混合使用不同的单位。例如，我们可以将第一行的高度设置为 100 像素，第二行的高度设置为 20%，第三行的高度设置为 300 像素：
.grid {
display: grid;
grid-template-rows: 100px 20% 300px;
}相对行高
我们还可以使用相对行高来指定网格行的大小。相对行高是指相对于网格容器的大小来计算行高。例如，我们可以将第一行的高度设置为 1fr，第二行的高度设置为 2fr，第三行的高度设置为 3fr：
.grid {
display: grid;
grid-template-rows: 1fr 2fr 3fr;
}在这个例子中，网格容器的大小并不重要。相对行高会自动根据网格容器的大小来计算。例如，如果容器的高度为 600 像素，则第一行的高度将为 100 像素，第二行的高度将为 200 像素，第三行的高度将为 300 像素。如果容器的高度为 1200 像素，则第一行的高度将为 200 像素，第二行的高度将为 400 像素，第三行的高度将为 600 像素。
分数行高
分数行高是相对行高的一种特殊形式。分数行高用分数来表示相对大小。例如，我们可以使用以下代码来创建一个具有两行的网格，其中第一行的高度为第二行的两倍：
.grid {
display: grid;
grid-template-rows: 2fr 1fr;
}在这个例子中，我们将第一行的高度设置为 2fr，这意味着它的大小是第二行大小的两倍。如果第二行的大小为 100 像素，则第一行的大小将为 200 像素。
自动行高
当我们将行高设置为 auto 时，网格将根据子元素的大小自动调整行高。例如，我们可以使用以下代码创建一个具有三行的网格，其中第一行和第三行的大小根据其内容自动调整，第二行的大小为 200 像素：
.grid {
display: grid;
grid-template-rows: auto 200px auto;
}在这个例子中，我们将第一行和第三行的大小设置为 auto，这将根据它们的内容自动计算大小。第二行的大小设置为 200 像素。
结论
在本文中，我们介绍了如何使用 grid-template-rows 属性来控制网格行的高度。我们探讨了各种不同的方式来指定行高，包括使用像素、百分比、相对和分数行高，以及自动行高。熟练掌握这些技术将使您能够更有效地使用 CSS Grid 来设计网格布局。
示例代码
-- -------------------- ---- ------- ---- ------------- ---- ------------------- ------- ---- ------------------- ------- ---- ------------------- ------- ------ ------- ----- - -------- ----- ------------------- ----- ----- ------ - -- ----------- ------ -- ------- - -------- ----- ------------------- --- ----- ------ - ------- - -------- ----- ------------------- ----- --- ------ - ------- - -------- ----- ------------------- --- --- ---- - ------- - -------- ----- ------------------- --- ---- - ------- - -------- ----- ------------------- ---- ----- ----- - --------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676ef26ae9a7045d0d6f1907