Tailwind Grid Auto Flow

The tailwind grid-auto-flow utility class in Tailwind CSS allows you to control the placement of grid items within a grid container when they don't have an explicit position defined. With Tailwind's grid-auto-flow class, you can easily set the flow direction of grid items in a grid layout.

Applying Tailwind Grid Auto Flow

To apply grid auto flow to a grid container, you can use the tailwind grid-auto-flow-{mode} utility class, where {mode}represents the desired flow mode. The {mode}can be one of the following values: row, column, dense, or row-dense to control the placement of grid items.

<div class="grid grid-cols-3 grid-auto-flow-column">
  <div class="bg-gray-200">Item 1</div>
  <div class="bg-purple-500">Element 2</div>
  <div class="bg-purple-500">Element 3</div>
  <div class="bg-purple-500">Element 4</div>
  <div class="bg-purple-500">Element 5</div>
</div>

Preview

Responsive Tailwind Grid Auto Flow

Tailwind CSS allows you to apply grid auto flow responsively at different breakpoints. To use responsive tailwind grid auto flow classes, you can append the breakpoint prefix to the grid auto flow class. For example, md:grid-auto-flow-row sets the flow mode to row starting from the medium breakpoint and above.

<div class="grid grid-cols-3 md:grid-cols-2 md:grid-auto-flow-row">
  <div class="bg-gray-200">Item 1</div>
  <div class="bg-gray-200">Item 2</div>
  <div class="bg-gray-200">Item 3</div>
  <div class="bg-gray-200">Item 4</div>
  <div class="bg-gray-200">Item 5</div>
</div>

In the above example, a grid container with 3 columns by default (grid-cols-3) and 2 columns starting from the medium breakpoint and above (md:grid-cols-2) is created. The md:grid-auto-flow-row class sets the flow mode to row starting from the medium breakpoint and above, which means the grid items will be placed horizontally in rows.

Tailwind Grid Auto Flow Class Table

Windframe Tailwind blocks

Team