CSS Grid 布局（CSS Grid）是一种强大的布局系统，使得我们可以以一种更加灵活、自然的方式来设计网页布局。在 CSS Grid 中，我们可以使用 grid-template-rows 属性来定义网格行的大小和数量。在本篇文章中，我们将会详细介绍 grid-template-rows 属性的用法，并为您提供一些实用的示例代码。
grid-template-rows 属性的基本语法和用法
grid-template-rows 属性是用来定义网格行的大小和数量的，它的基本语法如下所示：
------------------- ------------ ------------ ----
其中，<track-size> 可以是一个长度、一个百分比、一个 fr 单位或一个自动长度，用于定义每一行的大小。如果我们要定义多行，可以在 grid-template-rows 属性中用空格分隔每一行的大小。
下面是一个基本的例子，我们定义了一个由三个相等高度行组成的网格：
--------------- - -------- ----- ------------------- --- --- ---- -
在上面的例子中，我们使用了 fr（fraction units）单位来表示相等高度。在 CSS Grid 中，fr 单位会将剩余空间等分，因此在该例子中，每个网格行都会占据剩余空间的一部分。
grid-template-rows 属性的使用技巧
使用网格行自动适应高度
在一些情况下，我们希望在不知道内容高度的情况下，让行高自动适应内容高度。在这种情况下，我们可以使用 auto 关键字来定义网格行的大小。
--------------- - -------- ----- ------------------- ---- ---- ----- -
在上面的例子中，我们使用了 auto 关键字来定义每一行的大小。由于每一行的大小都是自动适应内容高度的，因此该布局可以很好地适应内容的大小变化。
使用网格行分数单位实现高度比例
在某些情况下，我们希望在网格中使用不同比例的行高。在这种情况下，我们可以使用分数单位 fr 来定义网格行的大小，并在不同行之间分配不同的分数。
--------------- - -------- ----- ------------------- --- --- ---- -
在上面的例子中，我们定义了三行不同的高度比例，第一行的高度为第二行高度的一半，第三行的高度与第一行相同。
使用 minmax() 函数实现动态网格行高
在一些情况下，我们希望在内容较少时，让网格行的高度自适应内容高度，而在内容较多时，让网格行有一个最小高度限制。在这种情况下，我们可以使用 minmax() 函数来定义网格行的最小和最大高度。
--------------- - -------- ----- ------------------- ------------- ----- ------------- ----- -
在上面的例子中，我们定义了两行不同的网格行高，其中第一行的高度会自适应内容高度，并且最小高度为 100px；而第二行的高度最小为 200px，最大为剩余空间的一部分。
使用实例
下面是一个完整的使用 grid-template-rows 的例子：
---- ----------------------- ---- ---------------- -------------------- ---- ---------------- ---------------- ---- ---------------- -------------------- ------
--------------- - -------- ----- ------------------- ----- --- ----- ---------------------- ---- ---- ----- -------------------- -------- ------ --------- - ---------- - ----------------- ----- -------- ----- - ------- - ---------- ------- - ----- - ---------- ----- - ------- - ---------- ------- -
在上面的例子中，我们使用了 grid-template-rows 属性来定义三个不同的行高，分别用于头部、主体和底部区域。我们还使用了 grid-template-areas 属性来定义每个网格项的位置。
总结
在 CSS Grid 布局中，grid-template-rows 属性是一个非常强大的工具，可用于定义网格行的数量、大小和比例。通过灵活使用 grid-template-rows 属性，我们可以轻松地实现各种各样的网格布局效果，并大大提高我们的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6652b2c1d3423812e472e51a