grid-auto-flow
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
The grid-auto-flow
CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
Try it
Syntax
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: revert;
grid-auto-flow: revert-layer;
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
Examples
Setting grid auto-placement
HTML
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
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 |
---|
CSS Grid Layout Module Level 2 # grid-auto-flow-property |
Browser compatibility
BCD tables only load in the browser
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