CSS Grid 布局：如何使用 grid-auto-rows 属性？
作为前端工程师，CSS Grid 布局已经成为了我们日常工作中必须掌握的一项技能。这个新时代的 CSS 布局方式是如此强大，因为它允许我们以更灵活的方式来布局网站，而不必在 HTML 中加入大量不必要的 DOM。在这个过程中，我们会涉及到许多 CSS 属性，其中一个重要的属性就是 grid-auto-rows。
grid-auto-rows 属性定义了在网格容器中没有指定行数的情况下，自动生成的行的高度。如果我们在网格容器中使用了自动网格布局，那么就可以使用它来自定义网格的高度。
语法如下：
grid-auto-rows: <row-size> | min-content | max-content | auto | fit-content(<length-percentage>) | repeat(<number>, <length-percentage>);
属性的值有多种不同的类型，可以是一个明确的长度值、 min-content 和 max-content、auto、fit-content 和 repeat。
下面，我们通过一些示例代码来更好地理解 grid-auto-rows 属性的使用。
示例1：
html 代码：
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------
css 代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------------- ------ --------- ----- ----------------- ----- - --------------- - --- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- -
在第一个示例中，我们定义了一个包含 9 个子元素的网格容器。通过设置网格容器的 grid-template-columns 属性为 repeat(3, 1fr)，我们创建了一个包含三列的网格布局。然后我们使用了 grid-auto-rows 属性，并将每个生成的行的高度都设置为 100px，即使在网格容器中有更多或更少的子元素。
结果如下：
示例2：
html 代码：
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------
css 代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------------- ------------ --------- ----- ----------------- ----- - --------------- - --- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- -
在这个示例中，我们使用了 grid-auto-rows 属性，并将它的值设置为 min-content。这样，自动生成的行的高度将根据其内容的最小高度来设置。这种情况下，我们将子元素的内容设置为不同数目的文字，以确保它们在生成的网格行中的大小各不相同。
结果如下：
示例3：
html 代码：
-- -------------------- ---- ------- ---- ----------------------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----- ------ ------------ ----------- ------- ----- --------- ------ ----- -------- ---- -------- --- --------- ---- ----- ---------- ------- -- --------- ---------- ---------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----- ------ ------------ ----------- ------- ----- --------- ------ ----- -------- ---- -------- --- --------- ---- ----- ---------- ------- -- --------- ---------- ---------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----- ------ ------------ ----------- ------- ----- --------- ------ ----- -------- ---- -------- --- --------- ---- ----- ---------- ------- -- --------- ---------- ---------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----- ------ ------------ ----------- ------- ----- --------- ------ ----- -------- ---- -------- --- --------- ---- ----- ---------- ------- -- --------- ---------- ---------- ----------- ---- -------------------- ----- ----- --- ---- ----------- ----------- ----------- ------
css 代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------------- ------------ --------- ----- ----------------- ----- - --------------- - --- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- -
在第三个示例中，我们将 grid-auto-rows 属性值设置为 max-content。这将导致自动生成的行的高度等于它们的最大高度。我们将子元素的内容设置为不同长度的段落，以确保它们在生成的网格行中的高度不同。
结果如下：
总结：
在本文中，我们讲解了 grid-auto-rows 属性，并通过三个示例来展示了其使用方法。通过灵活运用这个属性，我们可以更好地控制网格布局，实现更复杂和有趣的设计。希望这篇文章能对你了解和掌握 CSS Grid 布局之 grid-auto-rows 属性有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3aa6948841e9894febdea