grid-auto-flow

Utilities for controlling how elements in a grid are auto-placed.

| | grid-flow-col |

grid-auto-flow: column;

| | grid-flow-dense |

grid-auto-flow: dense;

| | grid-flow-row-dense |

grid-auto-flow: row dense;

| | grid-flow-col-dense |

grid-auto-flow: column dense;

|

Use utilities like grid-flow-col and grid-flow-row-dense to control how the auto-placement algorithm works for a grid layout:

01

02

03

04

05

<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">  <div class="col-span-2">01</div>  <div class="col-span-2">02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

Prefix a grid-auto-flow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="grid grid-flow-col md:grid-flow-row ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

On this page

• Quick reference
• Examples
  • Basic example
  • Responsive design

[

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

“This is the survival kit I wish I had when I started building apps.”

Derrick Reimer, SavvyCal

](https://www.refactoringui.com/?ref=sidebar)

Copyright © 2026 Tailwind Labs Inc.·Trademark Policy