grid-auto-flow

The grid-auto-flow property specifies how auto-placed items are inserted in the grid.

Syntax

Example:

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

Values

row
Default value. Items are placed by filling each row.

column
Items are placed by filling each column.

dense
Items are placed by filling any holes in the grid.

row dense
Items are placed by filling each row and by filling any holes in the grid.

column dense
Items are placed by filling each column and by filling any holes in the grid.

Browser Compatibilty

Demos

Have a code example of grid-auto-flow? Submit a codepen.io demo and we'll showcase it here ↴