Tailwind CSS 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.