CSS `grid-auto-flow` Property

Example

Insert grid elements column by column:

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

Property
grid-auto-flow	57	16	52	10	44

The grid-auto-flow property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

Default value:	auto
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
---	---

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

Value	Description
row	Default value. Places grid elements by filling each row, adding new rows as necessary.
column	Places grid elements by filling each column, adding new columns as necessary.
dense	This keyword specifies that the auto-placement algorithm uses a "dense" packing algorithm, trying to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out of order.
row dense	Fills in holes in the grid by row
column dense	Fills in holes in the grid by column

Fills in holes in the grid by row: