CSS - grid-auto-flow
The grid-auto-flow
CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
Example
HTML Content
<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" onchange="changeGridAutoFlow()"> <option value="row">row</option> <option value="column">column</option> </select> <input id="dense" type="checkbox" onchange="changeGridAutoFlow()"> <label for="dense">dense</label>
CSS Content
#grid { height: 200px; width: 200px; display: grid; 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() { var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); var gridAutoFlow = direction.value === "column" ? "row" : "column"; if (dense.checked) { gridAutoFlow += " dense"; } grid.style.gridAutoFlow = gridAutoFlow; }
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;
Values
row
- Is a keyword specifying that the auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither
row
norcolumn
is provided,row
is assumed. column
- Is a keyword specifying that the auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.
dense
- Is a keyword specifying that the auto-placement algorithm uses a “dense” packing algorithm, which 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 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 syntax
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> row <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> column <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> dense
Description
The grid-auto-flow
CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
Initial value | row |
---|---|
Applies to | grid containers |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 29.0[1] | 40.0 (40.0)[2] | Not supported | Not supported | 28.0[1] | Nightly build-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags
.
[2] Implemented behind the preference layout.css.grid.enabled
, defaulting to false
.
See Also
- Related CSS properties:
grid-auto-rows
,grid-auto-columns
,grid
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-auto-flow' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/grid-auto-flow