在 CSS Grid 中，可以用 grid-template-rows 属性来定义网格的行高。grid-template-rows 可以接受一个由行高值组成的列表，每个值表示一个网格行的高度，如下所示：
---------- - -------- ----- ------------------- ----- ----- ------ -
上面的示例中，.container 是一个 CSS Grid 容器，它包含三个网格行，分别为 100 像素高度、200 像素高度和 300 像素高度。
行高的单位
在 grid-template-rows 中，可以使用任何 CSS 长度单位来指定行高，比如像素（px）、百分比（%）、视口宽度（vw）等等。此外，还可以使用 fr 单位，它表示剩余空间的的一个分数，具体含义将在下面的内容中讲解。
等分行高
如果想让容器中的所有行等分，可以使用 repeat() 函数，如下所示：
---------- - -------- ----- ------------------- --------- ----- -
上面的示例中，.container 包含三个等高的网格行，每行高度占用剩余可用空间的 1/3。
自适应行高
使用上面介绍的方法可以精确地定义行高，但是在某些情况下，可能需要让行高自适应内容。
CSS Grid 中有两种方法可以实现自适应行高。第一种方法是使用 auto 关键字，如下所示：
---------- - -------- ----- ------------------- ---- ---- ----- -
上面的示例中，容器中的所有行高度将自适应其内容。
第二种方法是使用 minmax() 函数，如下所示：
---------- - -------- ----- ------------------- ------------- ----- ------------- ----- ------------- ------ -
上面的示例中，容器中的每行都有最小高度限制，并且高度可以自适应其内容。
行高的属性继承
注意，网格行的高度值并不会继承到其内容区域中。比如，下面的示例中，第一行的高度为 100 像素，但是其内容的高度超过了 100 像素，因此内容会被截断：
---------- - -------- ----- ------------------- ----- ----- - ---- - ------- --- ----- ------ ------- ------ -
为了让网格行的高度值也能应用于其中的内容，可以使用 align-items 属性，将内容垂直居中对齐：
---------- - -------- ----- ------------------- ----- ----- ------------ ------- - ---- - ------- --- ----- ------ ------- ------ -
上面的示例中，.container 的子元素 .box 等高，且垂直居中对齐。
结论
在 CSS Grid 中，可以用 grid-template-rows 属性来定义网格的行高。你可以使用像素、百分比、视口单位或 fr 单位来指定行高，也可以使用 auto 关键字或 minmax() 函数来实现自适应行高。注意，网格行的高度值并不会继承到其中的内容区域中，如果需要继承，请使用 align-items 属性垂直居中对齐内容。
示例代码
---- ------------------ ---- --------------- ------- ---- --------------- ------- ------ ------- ---------- - -------- ----- ------------------- ----- ----- ------------ ------- - ---- - ------- --- ----- ------ ------- ------ - --------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f74625f551281026492f7