CSS grid-auto-rows 属性

CSS grid-auto-rows 语法

在 CSS 中，grid-auto-rows 属性用于定义隐式创建的网格行的大小。

当网格容器中的子项数量超过了显式定义的行（通过 grid-template-rows 或 grid-template-areas 定义），或者当子项被放置到这些显式行之外的区域时，网格会自动创建新的行来容纳这些子项，这些行被称为 “隐式网格行” 。

grid-auto-rows 允许你控制这些自动创建的行的大小，而不是让它们默认地自动适应内容。

语法：

grid-auto-rows: <track-size>+;

说明：

grid-auto-rows 属性接受一个或多个 <track-size> 值。每个 <track-size> 值定义了一个或多个隐式行的尺寸：

auto（默认值）：行的尺寸将根据内容和 grid-auto-flow 的值自动调整。在大多数情况下，它等同于 minmax(min-content, max-content)。
长度值：一个固定的长度值，如 100px, 5em, 2rem 等。
百分比：一个相对于网格容器高度的百分比值。
fr：一个弹性长度，如 1fr。fr 单位表示可用空间的一个分数。
min-content：行的尺寸将根据其内容所需的最小空间来确定。
max-content：行的尺寸将根据其内容所需的理想（最大）空间来确定。
minmax(min, max)：定义一个尺寸范围，行的大小将在 min 和 max 之间。例如，minmax(100px, auto) 表示行最小为 100px，最大自动适应内容。

当提供多个 <track-size> 值时，这些值会按顺序循环应用于后续隐式创建的行。例如，grid-auto-rows: 100px 200px; 意味着第一个隐式行是 100px，第二个是 200px，第三个又是 100px，依此类推。

对于 grid-auto-rows 属性，小伙伴们要清楚以下几点。

grid-auto-rows 只影响那些没有通过 grid-template-rows 或 grid-template-areas 显式定义的行。
grid-auto-rows 通常与 grid-auto-flow: row-dense; 或 grid-auto-flow: column; 等属性结合使用，以更好地控制网格子项的自动放置行为。

注意: grid-auto-rows 属性只能用于网格容器本身，即定义了 display 取值为 grid 或 inline-grid 的元素。

CSS grid-auto-rows 摘要

属于	CSS grid 布局
使用频率	中
是否继承	否
默认值	auto
兼容性	查看
官方文档	查看
MDN	查看

CSS grid-auto-rows 示例

接下来，我们通过几个简单的例子来讲解一下 CSS grid-auto-rows 属性是如何使用的。

示例 1：grid-auto-rows 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            
            /* 显式定义 3 列 */
            grid-template-columns: repeat(3, 1fr);
            /* 只显式定义 1 行 */
            grid-template-rows: 100px; 
            
            /* 关键：设置隐式创建的行高为 50px */
            grid-auto-rows: 50px; 
            
            width: 300px;
            background-color: lightskyblue;
        }
        .container > div {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid silver;
            background-color: salmon;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>item 1 (显式行)</div>
        <div>item 2 (显式行)</div>
        <div>item 3 (显式行)</div>
        <div>item 4 (隐式行)</div>
        <div>item 5 (隐式行)</div>
        <div>item 6 (隐式行)</div>
        <div>item 7 (隐式行)</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-auto-rows 基本用法

分析：

在上面例子中，我们显示定义了一个 3 列（repeat(3, 1fr)）和 1 行（100px）的网格容器。

grid-auto-rows: 50px; 表示任何超出这第一行的子项，在自动创建新行时，这些新行的行高都将是 50px。所以小伙伴们可以看到除了第一行外的其他子项，高度都是 50px。

Item 1、Item 2、Item 3 会被放置在第一行（100px 高）。从 Item 4 开始，由于没有显式行可以放置，网格容器会自动创建新的行，这些新行的高度都将是 50px。

示例 2：grid-auto-rows 循环定义隐式行尺寸

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            
            /* 显式定义 3 列 */
            grid-template-columns: repeat(3, 1fr);
            /* 不显式定义行，所有行都由 grid-auto-rows 控制 */
            /* grid-template-rows: auto; */ /* 默认值 */
            
            /* 隐式行高度交替为 50px 和 100px */
            grid-auto-rows: 50px 100px; 
            
            width: 300px;
            background-color: lightskyblue;
        }

        .container > div {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid silver;
            background-color: salmon;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>item 1 (50px)</div>
        <div>item 2 (50px)</div>
        <div>item 3 (50px)</div>
        <div>item 4 (100px)</div>
        <div>item 5 (100px)</div>
        <div>item 6 (100px)</div>
        <div>item 7 (50px)</div>
        <div>item 8 (50px)</div>
        <div>item 9 (50px)</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-auto-rows 循环定义隐式行尺寸

分析：

在上面例子中，网格容器（container）只定义了列，没有显式定义行。这意味着所有行都将是隐式创建的。

grid-auto-rows: 50px 100px; 表示：第一行 (items 1-3) 将是 50px 高。第二行 (items 4-6) 将是 100px 高。第三行 (items 7-9) 又会回到 50px 高。以此类推，形成一种高度交替的效果。

示例 3：grid-auto-rows 配合 minmax() 实现灵活高度

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* 隐式行最小 100px，最大自动适应内容 */
            grid-auto-rows: minmax(100px, auto); 
            
            width: 200px;
            background-color: lightskyblue;
        }
        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid silver;
            background-color: salmon;
        }
        .long-item {
            /* 包含更多内容，测试 auto 行为 */
            grid-column: span 2;     /* 跨越两列，确保自身占据一整行 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">绿叶网</div>
        <div class="item">绿叶网</div>
        <div class="item long-item">绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程、手册、图书等。</div>
        <div class="item">绿叶网</div>
        <div class="item">绿叶网</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-auto-rows 配合 minmax() 实现灵活高度

分析：

grid-auto-rows 与 minmax() 函数的结合，这种方式在构建内容动态变化的网格布局时非常实用，它保证了视觉上的一致性（最小高度），同时又提供了内容适应性。

grid-auto-rows: minmax(100px, auto); 表示所有隐式创建的行最小高度将是 100px。如果其内容需要超过 100px 的空间，行将根据内容自动扩展 (auto)。

long-item 元素包含较长的文本，它的行高将超出 100px（如果文本非常多的话），以适应其内容。而其他内容较短的行，则会保持 100px 的最小高度。