CSS grid-auto-flowProperty
Example
Insert grid elements column by column:
.grid-container {
display: grid;
grid-auto-flow: column;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports this property.
| Property | |||||
|---|---|---|---|---|---|
| grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
Attribute definitions and usage instructions
The grid-auto-flow property specifies how the auto-placement algorithm works, precisely specifying how elements that are automatically placed in the grid are arranged.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| Version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridAutoFlow="row dense" Try it Yourself |
Syntax
grid-auto-flow: row|column|dense|row dense|column dense;
| Value | Description |
|---|---|
| row | Default value. Places grid elements by filling each row, adding new columns when necessary. |
| column | Places grid elements by filling each column, adding new columns when necessary. |
| dense | This keyword specifies that the auto-placement algorithm uses a "dense" packing algorithm. If slightly smaller elements appear later, it will attempt to fill the gaps left earlier in the grid. Doing so fills the gaps left by larger elements, but it may also cause the original order of appearance to be disrupted. |
| row dense | Fills the earlier gaps in the grid by row. |
| column dense | Fills the earlier gaps in the grid by column. |
Example
Fills the earlier gaps in the grid by row:
.grid-container {
display: grid;
grid-auto-flow: row dense;
}
Try it Yourself »
Related Articles
CSS Tutorial:CSS Grid Layout
other extensions