CSS grid-auto-flow Property

The grid-auto-flow specifies the placement of items in a grid.

By default, grid items will flow in rows, from left to right.

Other options include column, row dense, etc.

Example

#

A grid container with grid-auto-flow set to column.
The items are packed top to bottom, then left to right.

1
2
3
4
5
6
7
8
9
10
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div> 

Syntax

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

Values

#

Value Description
row Default. Fills the grid by row.
column Fills the grid by column.
dense Fill any holes in the grid.
row dense Fills the grid by row and any holes.
column dense Fills the grid by column and any holes.

More Examples

Click the buttons to see the different grid-auto-flow values.

1
2
3
4
5
6
7
8
9
10
<style>
  .grid-container-example {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto auto auto;
    grid-auto-flow: row;
  }

  .grid-container-example > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Browser support

This table shows when grid-auto-flow support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like

Guides