CSS - grid-auto-flow Property

Previous
Quiz
Next

CSS grid-auto-flow property controls how the grid items are placed into the grid when there are more items than explicitly defined grid tracks. It determines the direction in which the grid auto-places items into implicit rows or columns.

Syntax

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

Property Values

Value Description
row It places the items row-wise. Default.
column It places the item column-wise
dense It places the items such that they fill the space of the container.
row dense It places the items row-wise along with filling the space of the container.
column dense It places the items column-wise along with filling the space of the container.

Examples of CSS Grid Auto Flow Property

The following examples explain the grid-auto-flow property with different values.

Grid Auto Flow Property with Row Value

To place the elements in a grid-layout row-wise, we use the row value. This setting causes items to be placed from left to right, filling up each row before moving to the next. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: row;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: row (the elements 
      are arranged row-wise)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

Grid Auto Flow Property with Column Value

To place the elements in a grid-layout column-wise, we use the column value. This setting causes items to be placed from top to bottom, filling up each column before moving to the next. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: column;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: column (the elements
      are arranged column-wise)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

Grid Auto Flow Property with Dense Value

To place the elements in a grid-layout such that they fill maximum amount of space of the container as possible, we use the dense value. This setting attempts to fill available gaps in the grid by placing items in the first available space. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: dense;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: dense (the elements are arranged
      to fill maximum space)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

Grid Auto Flow Property with Row Dense Value

To place the elements in a grid-layout row-wise and also fill maximum amount of container space as possible, we use the row dense value. This setting places items row by row and attempts to fill any available gaps to make the layout more compact. This is shown in the followig example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: row dense;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: row dense (the elements are
      arranged row-wise and also fill maximum
      available space)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

Grid Auto Flow Property with Column Dense Value

To place the elements in a grid-layout column-wise and also fill maximum amount of container space as possible, we use the column dense value. This setting places items column by column and attempts to fill any available gaps to make the layout more compact. This is shown in the followig example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: column dense;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: column dense (the elements are
      arranged column-wise and fill maximum
      available space)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
grid-auto-flow 57 16 52 10 44
css_reference.htm
Print Page
Previous
Next
Advertisements