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">
<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 LayoutThe 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-auto-flow
|
Chrome Full support 57 Full support 57 Full support 29 Disabled' From version 29: this feature is behind the |
Edge
Full support 16 |
Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 44 Full support 44 Full support 28 Disabled' From version 28: this feature is behind the |
Safari
Full support 10.1 |
WebView Android
Full support 57 |
Chrome Android Full support 57 Full support 57 Full support 29 Disabled' From version 29: this feature is behind the |
Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
Opera Android Full support 43 Full support 43 Full support 28 Disabled' From version 28: this feature is behind the |
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
grid-auto-flow by Mozilla Contributors is licensed under CC-BY-SA 2.5.