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: rgb(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 denseorcolumn dense.
Values
row-
Items are placed by filling each row in turn, adding new rows as necessary. If neither
rownorcolumnis provided,rowis 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
grid-auto-flow =
[ 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 |
|---|
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |