CSS Grid 布局是一种强大且灵活的布局方式，可以帮助我们轻松地创建复杂的网页布局。其中，grid-template-rows 属性是用来定义网格行高的，我们可以使用它来实现自适应调节行高的效果。
grid-template-rows 属性简介
grid-template-rows 属性定义了网格容器中每一行的大小。它的语法如下：
------------------- ------------ ------------ ----
其中，<track-size> 可以是一个固定的长度值（比如 50px），也可以是一个占比值（比如 1fr）。如果有多个 track-size 值，它们就会依次填充每一行。
自适应调节行高的实现方法
要实现自适应调节行高的效果，我们可以使用 auto 关键字。当某一行的高度设置为 auto 时，它会自动根据内容的高度来调节。
--------------- - -------- ----- ------------------- --- ---- ---- -
上面的示例代码中，我们将网格容器分成了三行，并将中间的行的高度设置为 auto。这样，中间的行就会自适应调节高度，以容纳其中的内容。其他行的高度则被设置为相等的值（即占据剩余的空间）。
为了更好地理解，可以看下面这个简单的例子：
---- ----------------------- ---- --------------------------- ---- ------------------------------------------------- ---- --------------------------- ------ ------- --------------- - -------- ----- ------------------- --- ---- ---- - ---------- - ------- --- ----- ------ -------- ----- - --------
示例代码中，我们创建了一个网格容器，并将其分成了三行。第二行的内容较多，需要自适应调节行高。最终的效果如下图所示：
可以看到，第二行的高度被自动调节了，以适应其中的内容。
总结
在 CSS Grid 布局中，使用 grid-template-rows 属性可以定义网格容器中每一行的大小。通过将某一行的高度设置为 auto，我们可以实现自适应调节行高的效果。这种技术可以帮助我们更加灵活地控制网页布局，提高用户的阅读和使用体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6649aac5d3423812e4890fa7