<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

CSS grid-auto-flow Property

❮ Previous
Complete CSS Reference
Next ❯

Insert auto-placed items column by column:

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

Try it Yourself »

Definition and Usage

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

Note: Add the value "dense" to fill any holes 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

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

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

Value	Description	Play it
row	Default value. Insert auto-placed items by filling each row	Play it »
column	Insert auto-placed items by filling each column	Play it »
row dense	Insert auto-placed items by filling each row, and fill any holes in the grid	Play it »
column dense	Insert auto-placed items by filling each column, and fill any holes in the grid	Play it »

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

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

Try it Yourself »

CSS Tutorial: CSS Grid Layout

❮ Previous
Complete CSS Reference
Next ❯