grid-auto-flow

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

/* 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;

Initial value	`row`
Applies to	grid containers
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

This property may take one of two forms:

a single keyword: one of row, column, or dense.
two keywords: row dense or column dense.

Values

row: Is a keyword specifying that the auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.
column: Is a keyword specifying that the auto-placement algorithm places items, by filling each column in turn, adding new columns as necessary.
dense: Is a keyword specifying that the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.; If it is omitted, a “sparse” algorithm is used, where the placement algorithm only ever moves “forward” in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear “in order”, even if this leaves holes that could have been filled by later items.

Formal syntax

[ row | column ] || dense

Example

HTML Content

<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 Content

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

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

Specifications

Specification	Status	Comment
CSS Grid Layout The definition of 'grid-auto-flow' in that specification.	Candidate Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	57.0^[1]	52.0 (52.0)^[2]	No support	No support	44^[3]	No support^[4]

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.0^[1]	57.0^[1]	52.0 (52.0)^[2]	No support	44	No support

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

[3] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

[4] Experimental implementation available in Safari Technological Preview.