The grid-auto-flow
CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
, ordense
. - two keywords:
row dense
orcolumn dense
.
Values
row
- Items are placed by filling each row in turn, adding new rows as necessary. If neither
row
norcolumn
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" 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; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-auto-flow' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-auto-flow | Chrome
Full support
57
| Edge Full support 16 | Firefox
Full support
52
| IE No support No | Opera
Full support
44
| Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android
Full support
57
| Firefox Android
Full support
52
| Opera Android
Full support
43
| Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also
- Related CSS properties:
grid-auto-rows
,grid-auto-columns
,grid
- Grid Layout Guide: Auto-placement in grid layout
- Video tutorial: Introducing Grid auto-placement and order