🔄 Lesson 7: Grid Flow

What is Grid Flow?

Grid flow controls how items are automatically placed when you don't specify exact positions. By default, grids flow in rows (left to right, then down). But you can change this behavior!

This is especially useful when working with dynamic content where you don't know exactly how many items you'll have, or when you want items to fill gaps intelligently.

The Grid Flow Classes

Tailwind provides four grid flow utilities:

• grid-flow-row - Flow in rows (default, left→right, then down)
• grid-flow-col - Flow in columns (top→bottom, then right)
• grid-flow-row-dense - Flow in rows, but fill gaps
• grid-flow-col-dense - Flow in columns, but fill gaps

grid-flow-row (Default)

Items fill horizontally first, creating new rows when needed:

<div class="grid grid-flow-row grid-cols-3 gap-4">
  <div class="bg-blue-500 text-white p-4">1</div>
  <div class="bg-blue-500 text-white p-4">2</div>
  <div class="bg-blue-500 text-white p-4">3</div>
  <div class="bg-blue-500 text-white p-4">4</div>
  <div class="bg-blue-500 text-white p-4">5</div>
</div>

Result: Items 1-3 in first row, items 4-5 in second row.

grid-flow-col

Items fill vertically first, creating new columns when needed:

<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="bg-green-500 text-white p-4">1</div>
  <div class="bg-green-500 text-white p-4">2</div>
  <div class="bg-green-500 text-white p-4">3</div>
  <div class="bg-green-500 text-white p-4">4</div>
  <div class="bg-green-500 text-white p-4">5</div>
</div>

Result: Items 1-3 in first column (top to bottom), items 4-5 in second column.

Note: With grid-flow-col, you typically define grid-rows instead of grid-cols, since you're stacking vertically first.

Dense Packing

The "dense" variants (grid-flow-row-dense and grid-flow-col-dense) try to fill in gaps left by larger items. This can make layouts more compact but may change visual order.

Without Dense:

<div class="grid grid-flow-row grid-cols-3 gap-4">
  <div class="col-span-2 bg-purple-500 text-white p-4">1 (wide)</div>
  <div class="bg-purple-500 text-white p-4">2</div>
  <div class="bg-purple-500 text-white p-4">3</div>
  <div class="bg-purple-500 text-white p-4">4</div>
</div>

Item 1 takes 2 columns, leaving 1 space in first row. Item 2 fills it. Items 3 and 4 go to the next row, leaving a gap where item 1 was.

With Dense:

<div class="grid grid-flow-row-dense grid-cols-3 gap-4">
  <div class="col-span-2 bg-blue-600 text-white p-4">1 (wide)</div>
  <div class="bg-blue-600 text-white p-4">2</div>
  <div class="bg-blue-600 text-white p-4">3</div>
  <div class="bg-blue-600 text-white p-4">4</div>
</div>

The grid tries to fill gaps! Item 3 might move up to fill empty space, creating a tighter layout. Items may appear out of source order visually.

When to Use Each

grid-flow-row (Default)

Use for: Most layouts, card grids, image galleries

<div class="grid grid-cols-4 gap-4">
  <!-- Cards naturally flow left to right -->
</div>

grid-flow-col

Use for: Vertical timelines, sidebar navigation, column-based layouts

<div class="grid grid-flow-col grid-rows-5 gap-2">
  <!-- Timeline events stack vertically, then new columns -->
</div>

grid-flow-row-dense

Use for: Pinterest-style masonry layouts, dynamic content grids

<div class="grid grid-flow-row-dense grid-cols-3 gap-4">
  <!-- Items of different sizes pack tightly -->
</div>

grid-flow-col-dense

Use for: Vertical masonry, columnar news layouts

<div class="grid grid-flow-col-dense grid-rows-4 gap-4">
  <!-- Newspaper-style columns with varying heights -->
</div>

Real-World Example: Dynamic Card Grid

<div class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 gap-6">
  <!-- Featured cards span 2 columns -->
  <div class="col-span-2 bg-gradient-to-r from-blue-500 to-purple-600 
              text-white p-8 rounded-lg">
    <h3 class="text-2xl font-bold mb-2">Featured Article</h3>
    <p>This takes up double width</p>
  </div>
  
  <!-- Regular cards -->
  <div class="bg-white p-6 rounded-lg shadow">Card 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 3</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 4</div>
  
  <!-- Another featured card -->
  <div class="col-span-2 bg-gradient-to-r from-green-500 to-teal-600 
              text-white p-8 rounded-lg">
    <h3 class="text-2xl font-bold mb-2">Special Offer</h3>
    <p>Limited time only</p>
  </div>
  
  <div class="bg-white p-6 rounded-lg shadow">Card 5</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 6</div>
</div>

With grid-flow-row-dense, smaller cards automatically fill gaps left by the wide featured cards, creating a tight, magazine-style layout.

Responsive Grid Flow

You can change flow direction at different breakpoints:

<div class="grid grid-flow-row md:grid-flow-col grid-cols-2 md:grid-rows-3 gap-4">
  <!-- Mobile: flow in rows (horizontal)
       Desktop: flow in columns (vertical) -->
</div>