grid-auto-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
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
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: row dense;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 220px;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
}
#example-element > div:nth-child(1) {
grid-column: auto / span 2;
}
#example-element > div:nth-child(2) {
grid-column: auto / span 2;
}
Note:
The masonry-auto-flow
property was dropped from CSS Masonry layout in favor of grid-auto-flow
.
See csswg-drafts #10231 for details.
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: 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
<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 |
---|
CSS Grid Layout Module Level 2 # grid-auto-flow-property |
Browser compatibility
BCD tables only load in the browser