W3cubDocs

/CSS

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.

Syntax

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

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
Items are placed by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.
column
Items are placed by filling each column in turn, adding new columns as necessary.
dense
"dense" packing algorithm 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 definition

Initial value row
Applies to grid containers
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

[ row | column ] || dense

Examples

Setting grid auto-placement

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">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox">
<label for="dense">dense</label>

CSS

#grid {
  height: 200px;
  width: 200px;
  display: 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;
}

Result

Specifications

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
grid-auto-flow 57
57
29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
16 52
52
40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 44
44
28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
10.1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
grid-auto-flow 57 57
57
29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
52
52
40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
43
43
28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
10.3 6.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow