网格自动流 | grid-auto-flow (Grid Layout) - CSS 中文开发手册

grid-auto-flow控制自动布局算法如何工作，指定自动放置项目将究竟是如何流入网格。

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

语法

取值为下面两种形式之一：

单个关键字：row，column或dense。两个关键词：row dense或column dense.

价值

row是一个关键字，指定自动放置算法通过依次填充每一行来放置项，并在必要时添加新行。如果两者都没有row也不column提供，row都是假设的。

column是一个关键字，指定自动放置算法通过依次填充每个列来放置项，在必要时添加新列。

dense是一个关键字，指定自动布局算法使用“密集”填充算法，如果稍后出现较小的项目，该算法将尝试在网格中更早地填充漏洞。这可能会导致项目出现无序，这样做会填补较大的项目留下的漏洞。

如果省略，则使用“稀疏”算法，其中放置算法只在放置项目时在网格中“向前”移动，从不回溯以填补漏洞。这确保了所有自动放置的项目看起来“有序”，即使这留下了漏洞，可能已经填补了以后的项目。

形式语法

[ row | column ] || dense

例

HTML内容

<div id="grid">
? <div id="item1"></div>
? <div id="item2"></div>
? <div id="item3"></div>
? <div id="item4"></div>
? <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
? <option value="column">column</option>
? <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
<label for="dense">dense</label>

CSS内容

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column;  /* or ‘row‘, ‘row dense‘, ‘column dense‘ */
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

规范

浏览器兼容性