CSS grid-auto-flow 属性

CSS grid-auto-flow 语法

在 CSS 中，grid-auto-flow 属性用于控制网格子项自动放置的算法。

当网格容器中的子项没有被显式地放置（例如，没有设置 grid-row-start、grid-column-start 或 grid-area），或者当它们被放置在显式网格之外时，网格布局会自动将这些子项安排到可用的单元格中。

grid-auto-flow 决定了这种自动放置的 “方向” 和 “填充方式” ，是创建响应式和自适应网格布局的关键。

语法：

grid-auto-flow: 关键字;

说明：

grid-auto-flow 属性接受以下 1 个或 2 个关键字：

row ( 默认值 )：按行优先排列，子项从左到右填充当前行，当前行满后再进入下一行。
column：按列优先排列，子项从上到下填充当前列，当前列满后再进入下一列。
dense（可选）：稠密排列模式，浏览器会尝试 “回填” 空位，提高空间利用率。可以与 row 或 column 一起使用。

其中，dense 模式可能会打乱元素的 DOM 顺序，从而造成视觉上的 “跳跃”。

注意:

grid-auto-flow 属性只能用于网格容器本身，即定义了 display 取值为 grid 或 inline-grid 的元素。
grid-auto-flow 只会影响未被显式定位的子项（未设置 grid-row-start、grid-column-start 或 grid-area 的元素）。
一旦子项被明确指定位置，grid-auto-flow 对它将不再生效。

CSS grid-auto-flow 摘要

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

CSS grid-auto-flow 示例

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

示例：grid-auto-flow 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px;
            grid-auto-flow: row;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .container > div {
            border: 1px solid silver;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-auto-flow 示例

分析：

grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px;

父元素的尺寸为 300px×300px，但我们这里的 grid-template-columns 和 grid-template-rows 使用的都是固定像素值，因此会先划分出 300px×100px 的 “显式网格区域”，如下图所示。

显式网格区域

由于子元素有 5 个，前 3 个会占据 “显式网格区域”，还剩下 2 个。此时浏览器会自动划分一个 “隐式网格区域”，把后面 2 个包含进去。由于 grid-auto-flow: row; 设置的是在行部分生成隐式网格，然后把剩余 2 个包含进去。需要注意的是，此时剩余两个的列宽都是 100px。

提示: grid-auto-flow 属性的默认值就是 row，所以上面例子把 grid-auto-flow: row; 去掉，效果也是一样的。

如果 grid-auto-flow: row; 改为 grid-auto-flow: column;，由于父元素被划分为 3 列，子元素又有 5 个，而此时是使用列部分生成隐式网格，所以此时页面效果如下图所示。需要注意的是，此时剩余两个的行高是 100px。

grid-auto-flow: column;的网格区域

grid-auto-flow: row; 会生成一个 “行隐式网格”，此时我们可以使用 grid-auto-rows 来设置行隐式网格区域中 “行的高度”。比如改为下面代码，此时页面效果如下图所示。

.container {
    ……
    grid-auto-flow: row;
    grid-auto-rows: 50px;
    ……
}

grid-auto-flow: row;会生成一个“行隐式网格”

grid-auto-flow: column; 会生成一个 “列隐式网格”，此时我们可以使用 grid-auto-columns 来设置列隐式网格区域中 “列的宽度”。比如改为下面代码，此时页面效果如下图所示。

.container {
    ……
    grid-auto-flow: column;
    grid-auto-columns: 50px;
    ……
}

grid-auto-flow: column;会生成一个“列隐式网格”

隐式网格非常有用，利用这个特性，我们可以实现非常有用的自适应行列布局（自动换行显示）。后面会用一个综合例子来介绍。

最后，我们来总结一下，主要有以下几点。

grid-auto-flow: row; 表示由 “行” 产生隐式网格，而 grid-auto-flow: column 表示由 “列” 产生隐式网格。
grid-auto-rows 表示调整行的高度（配合行隐式网格），grid-auto-columns 表示调整列的宽度（配合列隐式网格）。
grid-template-rows 设置的是 “显式网格区域” 的行高，grid-auto-rows 设置的是 “隐式网格区域” 的行高。
grid-template-columns 设置的是 “显式网格区域” 的列宽，grid-auto-columns 设置的是 “隐式网格区域” 的列宽。