CSS grid-auto-flow 属性

CSS grid-auto-flow 属性定义了在网格容器中放置项目的方式。我们可以通过这个属性来控制网格项目的排列顺序、位置和布局。该属性只对没有被放置于网格里的项目有效。

语法

grid-auto-flow: row | column | row dense | column dense;

• row：按行顺序从左到右，逐行放置项目。
• column：按列顺序从上到下，逐列放置项目。
• row dense：会使得一些项目填补之前留下的空隙，使得原本更靠前的项目被放置得更靠后。
• column dense：同上，只不过会按列顺序放置项目。

默认值

默认值为 row，即按行从左到右顺序放置项目。

适用范围

• 网格元素容器

可继承性

不可继承。

浏览器兼容性

该属性的兼容性较好，但对于 IE 浏览器 11 及以下版本不支持此属性。

示例

.container {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

此代码的效果图如下：

建议

• grid-auto-flow 属性对项目数量不太固定的网格容器比较适用，更加灵活。

结束语

grid-auto-flow 属性是 CSS 网格布局中的一个非常重要的属性，可以通过这个属性来控制项目在网格容器中的排列方式，非常灵活，方便开发人员进行各种排版设计。