CSS grid-auto-flow property defines how auto-placed grid items get flowed into the grid.
By default, the grid-auto-flow property is set to row. This means that the grid container is filled row-wise. That is, at first the very first row is filled with grid items, then the second row, and then the third row, and so on until all grid items are filled in the rows.
In the example below, the grid container is filled column-wise as we have used grid-auto-flow: column;. Try it out:
Example:
.grid-container{
display: grid;
grid-auto-flow: column;
}
CSS Syntax
The grid-auto-flow property has the following syntax:
grid-auto-flow: row|column|dense|row dense|column dense|initial|inherit;
Property Values
The grid-auto-flow property accepts the following values:
| row | This is the default value. The grid items are placed row-wise. |
| column | The grid items are placed column-wise. |
| dense | If the grid items are of different sizes, the dense keyword tries to place the grid items in such a way that there is minimum possible vacant space in the grid. |
| row dense | If the grid items are of different sizes, the row dense keyword tries to place the grid items in such a way that there is minimum possible vacant space in the grid rows. |
| column dense | If the grid items are of different sizes, the column dense keyword tries to place the grid items in such a way that there is minimum possible vacant space in the grid columns. |
| initial | Sets the grid-auto-flow property to its default value(row). |
| inherit | Inherits the grid-auto-flow property from the parent element. |
General Info
| Default Value | row |
| Inherited | No |
| JavaScript Usage | element.style.gridAutoFlow = “column” |
