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.
Thegrid-auto-flowCSS 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> <div> <div> <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:Themasonry-auto-flow property was dropped from CSSMasonry layout in favor ofgrid-auto-flow.Seecsswg-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
rowItems are placed by filling each row in turn, adding new rows as necessary. If neither
rownorcolumnis provided,rowis assumed.columnItems 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> <div></div> <div></div> <div></div> <div></div> <div></div></div><select> <option value="column">column</option> <option value="row">row</option></select><input 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;}function changeGridAutoFlow() { const grid = document.getElementById("grid"); const direction = document.getElementById("direction"); const dense = document.getElementById("dense"); let gridAutoFlow = direction.value === "row" ? "row" : "column"; if (dense.checked) { gridAutoFlow += " dense"; } grid.style.gridAutoFlow = gridAutoFlow;}const selectElem = document.querySelector("select");const inputElem = document.querySelector("input");selectElem.addEventListener("change", changeGridAutoFlow);inputElem.addEventListener("change", changeGridAutoFlow);Result
Specifications
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |
Browser compatibility
Loading…