Tailwind CSS Grid Auto Flow

The grid-auto-flow property specifies how the auto-placement algorithm places auto-placed items within their content area on the grid. It sets the direction in which the browser lays out grid items automatically. It allows you to specify whether you want the browser to fill rows or columns first.

Syntax

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

• row - This value stacks the items by filling the rows.
• column - This value stacks the items by filling the columns.
• row dense - This value stacks the items by filling the rows, but it makes sure that smaller items fill in any gaps.
• column dense - This value stacks the items by filling the columns, but it makes sure that smaller items fill in any gaps.

Example

<div class="grid grid-cols-2 grid-rows-2">
  <div class="bg-red-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-blue-200 p-4">3</div>
  <div class="bg-yellow-200 p-4">4</div>
</div>

.grid {
  grid-auto-flow: row;
}

Output

Explanation

In the above example, we have created a 2 x 2 grid and given four child elements. We have set the grid-auto-flow property to row, which means it stacks the items by filling the rows. So, the first two items fill the first row, and the next two items fill the second row.

Use

The grid-auto-flow property is useful when we want the browser to decide the placement of extra grid items automatically.

Important Points

• If we haven't specified a grid size for rows or columns beyond the first, the browser can decide how to arrange them using grid-auto-columns and grid-auto-rows.
• The grid-auto-flow property won't work if we have specified a grid using grid-template-rows and grid-template-columns.

Summary

• The grid-auto-flow property specifies how the auto-placement algorithm places auto-placed items within their content area on the grid.
• It allows you to specify whether you want the browser to fill rows or columns first.
• We can set it to row, column, row dense, or column dense.
• It is useful when we want the browser to decide the placement of extra grid items automatically.
• It won't work if we have specified a grid using grid-template-rows and grid-template-columns.