CSS grid-auto-flow Property

Insert auto-placed items column by column:

.grid-container {
display: grid;
grid-auto-flow: column;
}

Definition and Usage

The grid-auto-flow property controls how auto-placed items get inserted in the grid.

Default value:	row
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS Grid Layout Module Level 1
JavaScript syntax:	object.style.gridAutoFlow="row dense" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-flow	57	16	52	10	44

grid-auto-flow: row|column|dense|row dense|column dense;

Value	Description	Demo
row	Default value. Places items by filling each row	Demo ❯
column	Places items by filling each column	Demo ❯
dense	Place items to fill any holes in the grid	Demo ❯
row dense	Places items by filling each row, and fill any holes in the grid	Demo ❯
column dense	Places items by filling each column, and fill any holes in the grid	Demo ❯

Fill any holes in the grid by adding the "dense" value:

.grid-container {
display: grid;
grid-auto-flow: row dense;
}