CSS Grid 布局是现代前端设计中必不可少的一种技术。它允许我们以非常灵活的方式布置网格系统，让我们轻松地创建出各种复杂的布局效果。其中，grid-auto-rows 属性是一个非常有用的属性，它可以帮助我们自适应地调节网格的高度，从而实现更加灵活的布局。
什么是 grid-auto-rows 属性
grid-auto-rows 属性用来指定在网格中，没有被显式定义高度的行的高度应该如何处理。在 CSS Grid 布局中，我们通常使用 grid-template-rows 属性来显式地定义页面中每一行的高度。但是在某些情况下，我们无法预知页面中每一行的精确高度，这时候就需要使用 grid-auto-rows 属性来进行动态调节。
如何使用 grid-auto-rows 属性自动调节高度
使用 grid-auto-rows 属性自动调节高度可以非常简单，我们只需要在 CSS 样式中加入如下的样式：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}这里，我们使用了 minmax 函数来定义网格的高度，第一个参数 100px 定义了网格的最小高度，而第二个参数 auto 表示网格的最大高度由内容自动决定。这样一来，当网格中的内容过多时，网格的高度会自动调整以适应内容的大小。
示例代码
下面是一个基于 grid-auto-rows 属性的简单示例代码，我们通过它可以更好地理解 grid-auto-rows 属性的使用方法。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---- ------------
-------
--------------- -
-------- -----
---------------------- --------- -----
--------------- ------------- ------
--------- -----
-
---------- -
----------------- ------
-------- -----
-
--------
-------
------
---- -----------------------
---- -------------------- ----- ----- ----- --- ----- ----------- ---------- -----------
---- -------------------- --- ----- -- -- ------ -------- ------- ----- --- -------------
---- -------------------- ----- -------- --------- ------ --- --------- -- ------- ---------
---- -------------------- ---------- ------- ----- -- ------ --------- -------------
---- -------------------- ----------- -------- ----------- ---- ----------- ------------
---- -------------------- -- ------- ------ ------ -- --------- ---- ------ ----------
---- -------------------- ------ -- -------- -----------
---- -------------------- ---- ------- ----- - ------- ------------
------
-------
-------在上述代码中，我们使用 grid-template-columns 属性定义了网格容器中一共有三列，每一列的宽度都是 1fr （表示分成三等份）。接着，我们使用 grid-auto-rows 属性来自适应调节网格容器中每一行的高度，最小高度为 100px，最大高度为内容高度。最后，我们使用 grid-gap 属性来定义网格之间的间距，这里为 10px。
运行代码后，我们可以看到网格容器中的每一个子元素都被自适应地调整了高度，以适应它们内部的内容。这样一来，我们就可以轻松地创建出不同高度的网格，从而组成更加灵活的页面布局。
总结
在本文中，我们介绍了如何使用 grid-auto-rows 属性来自适应调节 CSS Grid 布局中的网格高度。通过示例代码的演示，我们可以看出，这种方法非常实用，可以帮助我们轻松地实现不同高度的布局效果。如果你正在学习 CSS Grid 布局，那么一定要掌握 grid-auto-rows 属性，这将对你的页面设计带来很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6646ba63d3423812e44db69b