CSS grid-auto-flow

The CSS grid-auto-flow property is used to define the flow of auto-placed grid items based on the value assigned to it, in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.containerOne {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template-rows: auto auto; grid-template-columns: auto auto auto;
         grid-auto-flow: row;}
      div.containerOne > div {background-color: maroon; padding: 10px; text-align: center;}
      div.containerTwo {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template-rows: auto auto; grid-template-columns: auto auto auto;
         grid-auto-flow: column;}
      div.containerTwo > div {background-color: maroon; padding: 10px; text-align: center;}
   </style>
</head>
<body>

   <h2>grid-auto-flow: row</h2>
   <div class="containerOne">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
   </div>

   <h2>grid-auto-flow: column</h2>
   <div class="containerTwo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
   </div>
   
</body>
</html>

Output

grid-auto-flow: row

grid-auto-flow: column

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

Note - The grid-template-columns is used to define the number of columns to create in grid layout

Note - The grid-template-rows is used to define the height of a/multiple row(s) in grid layout.

In above example, the CSS code can be minified. Here is the minified version of CSS codes used in above example:

.containerOne, .containerTwo {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
   grid-template-rows: auto auto; grid-template-columns: auto auto auto;}
.containerOne > div, .containerTwo > div {background-color: maroon; padding: 10px;
   text-align: center;}
.containerOne {grid-auto-flow: row;}
.containerTwo {grid-auto-flow: column;}

CSS grid-auto-flow Syntax

The syntax of grid-auto-flow property in CSS, is:

grid-auto-flow: x;

The value of x should be any of the following:

row - This value is used when we need to place grid items row by row. This is the default one.
column - This value is used when we need to place grid items column by column.
row dense - Similar to row, but it also fills holes
column dense - Similar to column, but it also fills holes
dense - This value is used to fill holes, if any

CSS Online Test

« Previous Tutorial Next Tutorial »