grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

```css interactive-example-choice grid-auto-flow: row;


```css interactive-example-choice
grid-auto-flow: column;

```css interactive-example-choice grid-auto-flow: row dense;


```html interactive-example
<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

```css interactive-example

example-element {

border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(40px, auto)); grid-gap: 10px; width: 220px; }

example-element > div {

background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; }

example-element > div:nth-child(1) {

grid-column: auto / span 2; }

example-element > div:nth-child(2) {

grid-column: auto / span 2; }


## 语法

```css
/* 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
- : 该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

正式语法

示例

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;
}

```js hidden function changeGridAutoFlow() { var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); var gridAutoFlow = direction.value === "row" ? "row" : "column";

if (dense.checked) { gridAutoFlow += " dense"; }

grid.style.gridAutoFlow = gridAutoFlow; } ```