CSS grid-auto-flow attribute

Definition and Usage

The grid-auto-flow property controls how automatically placed items are inserted into the grid.

See also:

CSS Tutorial:CSS Grid Layout

Example

Example 1

Insert automatically placed items column by column:

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

Try It Yourself

Example 2

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

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

Try It Yourself

CSS Syntax

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

Attribute Value

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

Technical Details

Default Value: row
Inheritance: No
Animation Creation: Supported. See also:Animation-related Properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridAutoFlow="row dense"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44