前言
CSS Grid 布局是现代网页布局的新兴技术，它允许我们将页面划分成一个网格，然后通过指定每个网格的属性，实现相对于普通的 Flexbox 布局更灵活和自由的布局方式。
在 CSS Grid 中，我们可以通过定义网格的行高和列宽来为网格系统赋予更多的弹性。在本文中，将会介绍使用 CSS Grid 中的 grid-auto-rows 属性来设置网格默认行高的方法和指导意义，希望对前端开发者们有所帮助。
grid-auto-rows 属性
在 CSS Grid 中，网格系统是由行和列组成的，每个网格都有一个默认的尺寸。其中，行可以通过 grid-template-rows 属性定义，而列可以通过 grid-template-columns 属性定义。
但是对于没有被显式地定义行高或列宽的网格元素，就需要使用 grid-auto-rows 和 grid-auto-columns 属性来指定它们的默认尺寸。
在本文中，我们重点介绍 grid-auto-rows 属性。这个属性用于定义网格中没有被显式定义高度的网格容器的默认高度。
如何使用 grid-auto-rows 属性设置行高
使用 grid-auto-rows 属性设置网格默认行高非常简单，我们只需要在 CSS 样式表中加入如下代码：
.grid-container {
display: grid;
grid-auto-rows: 100px;
}上述代码中，我们将网格容器的 grid-auto-rows 属性设置为 100px，这意味着如果一个网格容器没有被显式地定义高度，它的默认高度将会是 100px。
示例代码
下面是一个示例代码，我们可以通过在相应的 CSS 样式表中加入 grid-auto-rows 属性来设置它的默认行高，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
-------
--------------- -
-------- -----
---------------------- --- ----
--------------- ------
---- -----
-
---------- -
----------------- --------
------- --- ----- -----
-------- -----
----------- -------
-
---------------- -
--------- ---- --
-
--------
-------
------
---- -----------------------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------- ----------- - -------------
---- ---------------------- -------
---- ---------------------- -------
------
-------
-------在上面的代码中，我们使用了一个 2 列的网格，然后在 grid-auto-rows 属性中设置了每一行的默认高度为 100px。我们在网格的容器中加入了 6 个网格项，其中第 4 个网格项通过 grid-row 属性跨越了两行，这也说明了使用 CSS Grid 布局来处理网格系统的灵活性。
结论
这篇文章介绍了使用 grid-auto-rows 属性来设置网格默认行高的方法和意义，希望能给前端开发者们带来新的思路和帮助。在使用 CSS Grid 布局时，我们需要根据具体情况灵活使用各种属性来实现网页布局的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f8290e9a7045d0d73bfa0