引言
CSS Grid 布局是一种强大的前端布局方式，它允许我们以一种更直观的方式来组织网页布局。在 CSS Grid 布局中，我们可以通过定义网格的行和列来控制组件的位置和排列。grid-template-rows 属性是一个控制 CSS Grid 行高的属性，通过它，我们可以创建具有各种不同行高的网格。在本文中，我们将学习如何使用 grid-template-rows 属性来控制 CSS Grid 布局中的行高。
grid-template-rows 属性
grid-template-rows 属性是一个用于定义 CSS Grid 布局中行高的属性。通过它，我们可以为 CSS Grid 定义一组行，每行的高度可以是一个固定的值、一个百分比值，或者一个使用 minmax() 函数定制的高度值。该属性的语法如下：
grid-template-rows: <track-size> | <line-name> | minmax() | fit-content() | repeat();
其中，<track-size> 表示一个固定的长度值，例如 50px 或者 20%。 <line-name> 则是一个用于定义具名行的变量名称。 minmax() 和 fit-content() 是两种用于定制行高的函数。repeat() 函数可以用于重复一个已定义的值，例如 repeat(5, 1fr) 表示重复 5 次 1fr。
如何使用 grid-template-rows 属性
下面我们通过几个示例来学习如何使用 grid-template-rows 属性来控制 CSS Grid 布局中的行高。
示例 1：创建一个等高的网格
我们首先创建一个简单的网格，其中所有的行都具有相同的高度。代码如下：
<div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- ---- --------- ----- ------------------- ------ - ----- - ----------------- ----- -------- ----- -
在上面的代码中，我们定义了一个具有两列和四行的 CSS Grid 布局。通过 grid-template-rows: 100px 定义，我们为每一行设置了一个高度值为 100px。这意味着所有的行都具有相同的高度。我们还定义了一些基本样式来让组件更加易于区分。
下面是运行结果的截图：
从截图中可以看出，所有的行具有相同的高度，网格中的组件按照其排列位置均匀地分布到了整个网格中。
示例 2：创建具有不同行高的网格
现在我们来看一个稍微复杂一些的例子。在这个例子中，我们创建一个具有多个不同行高的网格。代码如下：
-- -------------------- ---- ------- ---- ------------- ---- -------------------- ---- ----------- ------------- ---- -------------------- ---- -------------------- ---- ----------- -------------- ---- -------------------- ---- ----------- -------------- ---- -------------------- ---- -------------------- ---- --------------------- ------
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- ---- --------- ----- ------------------- ------------- ------ - ----- - ----------------- ----- -------- ----- - ----- - ------------- ---- -- - ------ - ------------- ---- ---- -
在上面的代码中，我们定义了一个具有两列和十行的 CSS Grid 布局。通过 grid-template-rows: minmax(100px, auto) 定义，我们为每一行设置了一个最小高度值为 100px，同时也允许根据组件的内容自适应地调整高度。我们还定义了一些其他的样式来让组件更加易于区分。注意看 .tall 和 .short 类，它们用来设置某些行的高度变化。
下面是运行结果的截图：
从截图中可以看出，每一行的高度都不同，具有 .tall 类的组件跨越了两行，而具有 .short 类的组件则仅跨越了半行。
总结
在本文中，我们学习了如何使用 grid-template-rows 属性来控制 CSS Grid 布局中的行高。我们了解了该属性的语法和使用方法，并通过两个示例来详细说明怎样使用该属性来创建不同高度的网格。CSS Grid 布局是一个非常强大的前端布局方式，它有助于我们以一种直观的方式来组织网页布局。学会如何使用 CSS Grid 布局将会帮助我们更加高效地创建各种网页布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66470389d3423812e453e2bb