Grid Auto Flow

Controls how the auto-placement algorithm works in CSS Grid, determining how items that aren't explicitly placed are automatically arranged. This utility helps manage the flow direction and density of automatically placed grid items. In Tailwind v4, grid-auto-flow utilities have improved compatibility with other grid features like grid-template-areas.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 grid-auto-flow-row gap-4">
  <div class="bg-blue-100 p-4">1</div>
  <div class="bg-blue-200 p-4">2</div>
  <div class="bg-blue-300 p-4">3</div>
  <div class="col-span-2 bg-blue-400 p-4">4 (spans 2 cols)</div>
  <div class="bg-blue-500 p-4">5</div>
  <div class="bg-blue-200 p-4">6</div>
</div>

Examples

Default row flow - items fill rows first, moving to next row when needed

<div class="grid grid-cols-3 grid-auto-flow-row gap-4">
  <div class="bg-blue-100 p-4">1</div>
  <div class="bg-blue-200 p-4">2</div>
  <div class="bg-blue-300 p-4">3</div>
  <div class="col-span-2 bg-blue-400 p-4">4 (spans 2 cols)</div>
  <div class="bg-blue-500 p-4">5</div>
  <div class="bg-blue-200 p-4">6</div>
</div>

Edit in playground

Column flow - items fill columns first, moving to next column when needed

<div class="grid grid-rows-3 grid-auto-flow-col gap-4 h-64">
  <div class="bg-green-100 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-green-300 p-4">3</div>
  <div class="row-span-2 bg-green-400 p-4">4 (spans 2 rows)</div>
  <div class="bg-green-500 p-4">5</div>
  <div class="bg-green-200 p-4">6</div>
</div>

Edit in playground

Dense flow - fills in gaps by placing smaller items in available spaces

<!-- Dense packing for more efficient space usage -->
<div class="grid grid-cols-3 grid-auto-flow-dense gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">1</div>
  <div class="col-span-2 bg-blue-200 p-4 rounded">2 (spans 2 cols)</div>
  <div class="col-span-2 bg-blue-300 p-4 rounded">3 (spans 2 cols)</div>
  <div class="bg-blue-400 p-4 rounded">4</div>
  <div class="bg-blue-500 p-4 rounded">5</div>
  <!-- Note how item 5 fills the gap that would be left in normal flow -->
</div>

Edit in playground

Gallery-style layout with dense packing of different sized items

<!-- Interactive gallery with mixed item sizes -->
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 grid-auto-flow-dense gap-3 p-4 bg-gray-100 rounded-lg">
  <!-- Regular items -->
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">1</div>
  
  <!-- Wide items -->
  <div class="col-span-2 bg-blue-200 aspect-[2/1] rounded-lg flex items-center justify-center">Wide</div>
  
  <!-- Regular items -->
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">3</div>
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">4</div>
  
  <!-- Tall item -->
  <div class="row-span-2 bg-blue-300 aspect-[1/2] rounded-lg flex items-center justify-center">Tall</div>
  
  <!-- Regular items -->
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">6</div>
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">7</div>
  
  <!-- Large item -->
  <div class="col-span-2 row-span-2 bg-blue-400 aspect-square rounded-lg flex items-center justify-center">Large</div>
  
  <!-- More regular items to fill space -->
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">9</div>
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">10</div>
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">11</div>
  <div class="bg-blue-100 aspect-square rounded-lg flex items-center justify-center">12</div>
</div>

Edit in playground

Live Preview

Try the Grid Auto Flow utility with different values

Open Interactive Playground

Variants

row: fills each row in order, moving to next row when full (default); col: fills each column in order, moving to next column when full; dense: attempts to fill holes earlier in the grid; row-dense: dense algorithm with row direction; col-dense: dense algorithm with column direction

rowcoldenserow-densecol-dense