CSS grid-auto-flow

The grid-auto-flow property in CSS specifies how the auto-placement algorithm works, specifying how the items are automatically placed in the grid container.

There are four possible values for the grid-auto-flow property:

row: This value places the items in rows, filling each row from left to right before moving on to the next row.
column: This value places the items in columns, filling each column from top to bottom before moving on to the next column.
row dense: This value behaves like row, but it tries to fill in any gaps in the grid by inserting items into the spaces left by grid items that are not fully spanning the grid.
column dense: This value behaves like column, but it tries to fill in any gaps in the grid by inserting items into the spaces left by grid items that are not fully spanning the grid.

Let's see some examples using fictional data:

Result:


    .grid-container {
      display: grid;
      grid-template-columns: 50px 50px 50px;
      grid-auto-flow: row;
    }

Result:


    .grid-container {
      display: grid;
      grid-template-columns: 50px 50px 50px;
      grid-auto-flow: column;
    }

These are just basic examples to show how the grid-auto-flow property works. You can explore more complex grid layouts by experimenting with different values and grid configurations.