CSS grid-auto-flow Property

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

This property has the following values: row, column, dense, row-dense, column-dense. If neither "row" nor "column" value is provided, "row" is assumed.

Initial Value row
Applies to Grid containers.
Inherited No.
Animatable Yes.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridAutoFlow = "row";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: column;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grey-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: column</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Here is an example with the "row" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .white-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: row;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .white-container > div {
      background-color: #fff;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: row</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Values

Value Description
row Places items by filling each row, adding new rows if necessary. This is the default value of this property.
column Places items by filling each column, adding new columns if necessary.
dense Place items to fill any holes in the grid if smaller items come up later.
row-dense Places items by filling each row, and fills holes in the grid.
column-dense Places items by filling each column, and fills holes in the grid.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles