Lesson 5: Spanning Rows | Gridlock Holmes

What is Row Spanning?

Just like column spanning lets items stretch horizontally across columns, row spanning lets items stretch vertically across rows. This is perfect for sidebars, tall images, or any element that needs more vertical space.

To use row spanning effectively, you need to first define how many rows your grid has using grid-rows-*.

Defining Grid Rows

Before you can span rows, tell the grid how many rows it should have:

grid-rows-1 - 1 row
grid-rows-2 - 2 rows
grid-rows-3 - 3 rows
grid-rows-4 - 4 rows
grid-rows-5 - 5 rows
grid-rows-6 - 6 rows

💡 Rows vs Columns:

Most grids specify columns (grid-cols-*) and let rows create automatically. But when you want precise control over vertical height, explicitly define rows with grid-rows-*.

The row-span Classes

Once you have rows defined, use row-span-* to make items span multiple rows:

row-span-1 - Span 1 row (default)
row-span-2 - Span 2 rows
row-span-3 - Span 3 rows
row-span-4 - Span 4 rows
row-span-5 - Span 5 rows
row-span-6 - Span 6 rows
row-span-full - Span all rows

Basic Example

Here's a grid with 3 rows where one item spans 2 rows vertically:

<div class="grid grid-rows-3 grid-cols-3 gap-4 h-96">
  <!-- Sidebar spans 2 rows -->
  <div class="row-span-2 bg-blue-500 text-white p-4">
    Sidebar (spans 2 rows)
  </div>
  
  <div class="bg-gray-300 p-4">Item 2</div>
  <div class="bg-gray-300 p-4">Item 3</div>
  <div class="bg-gray-300 p-4">Item 4</div>
  <div class="bg-gray-300 p-4">Item 5</div>
  <div class="bg-gray-300 p-4">Item 6</div>
  <div class="bg-gray-300 p-4">Item 7</div>
</div>

The first item takes up 2 rows of vertical space, while the other items flow around it naturally.

Combining Column and Row Spans

This is where things get powerful! You can span both columns AND rows simultaneously:

<div class="grid grid-rows-3 grid-cols-4 gap-4 h-96">
  <!-- Featured item: 2 columns wide, 2 rows tall -->
  <div class="col-span-2 row-span-2 bg-gradient-to-br from-purple-500 to-pink-500 
              text-white p-6 flex items-center justify-center">
    Featured Content
    (2 cols × 2 rows)
  </div>
  
  <div class="bg-gray-200 p-4">Item 2</div>
  <div class="bg-gray-200 p-4">Item 3</div>
  <div class="bg-gray-200 p-4">Item 4</div>
  <div class="bg-gray-200 p-4">Item 5</div>
  <div class="bg-gray-200 p-4">Item 6</div>
  <div class="bg-gray-200 p-4">Item 7</div>
</div>

The featured item takes up a 2×2 space (4 grid cells total), creating a prominent visual anchor.

Real-World Pattern: Dashboard Layout

A common dashboard pattern uses row spanning for a persistent sidebar:

<div class="grid grid-rows-4 grid-cols-4 gap-4 h-screen">
  <!-- Navigation sidebar spans all 4 rows -->
  <nav class="row-span-full bg-gray-900 text-white p-6">
    <h2 class="text-xl font-bold mb-4">Dashboard</h2>
    <ul class="space-y-2">
      <li>Home</li>
      <li>Analytics</li>
      <li>Settings</li>
    </ul>
  </nav>
  
  <!-- Header spans 3 columns -->
  <header class="col-span-3 bg-white shadow p-4">
    Dashboard Header
  </header>
  
  <!-- Main content area -->
  <main class="col-span-3 row-span-3 bg-gray-50 p-6">
    Main content goes here
  </main>
</div>

The sidebar uses row-span-full to always occupy the full height, regardless of how many rows exist.

⚠️ Height Required:

Row spanning works best when the grid container has a defined height (like h-96 or h-screen). Without height, rows may collapse or behave unexpectedly.

Image Gallery with Featured Photo

Create a Pinterest-style gallery where one photo is much larger:

<div class="grid grid-rows-4 grid-cols-3 gap-2 h-screen">
  <!-- Featured image: 2 cols × 3 rows -->
  <img src="featured.jpg" 
       class="col-span-2 row-span-3 w-full h-full object-cover"
       alt="Featured">
  
  <img src="photo1.jpg" class="w-full h-full object-cover" alt="Photo 1">
  <img src="photo2.jpg" class="w-full h-full object-cover" alt="Photo 2">
  <img src="photo3.jpg" class="w-full h-full object-cover" alt="Photo 3">
  <img src="photo4.jpg" class="col-span-3 w-full h-full object-cover" alt="Photo 4">
</div>

Responsive Row Spanning

Just like columns, you can change row spans at different screen sizes:

<div class="grid grid-rows-3 grid-cols-1 md:grid-cols-3 gap-4 h-96">
  <aside class="row-span-1 md:row-span-3 bg-blue-600 text-white p-4">
    Mobile: 1 row
    Desktop: Spans all 3 rows
  </aside>
  <div class="bg-gray-200 p-4">Content 1</div>
  <div class="bg-gray-200 p-4">Content 2</div>
</div>

On mobile, the sidebar is just one row tall. On desktop, it becomes a full-height sidebar.

Grid Flow Direction

By default, grids flow in rows (left to right, then down). When using row spanning, sometimes you want to flow in columns instead (top to bottom, then right). Use grid-flow-col:

<div class="grid grid-flow-col grid-rows-3 gap-4 h-96">
  <div class="row-span-3 bg-blue-500 text-white p-4">
    Spans 3 rows
  </div>
  <div class="bg-gray-300 p-4">Item 2</div>
  <div class="bg-gray-300 p-4">Item 3</div>
  <div class="bg-gray-300 p-4">Item 4</div>
</div>

With grid-flow-col, items flow vertically first, making row-based layouts more intuitive.

✅ Pro Tip:

Use row-span-full for sidebars or navigation that should always span the full height, just like col-span-full works for full-width headers!

Common Use Cases

App Layout with Sidebar

<div class="grid grid-rows-6 grid-cols-5 gap-0 h-screen">
  <nav class="row-span-full bg-gray-800 text-white p-4">
    Sidebar
  </nav>
  <header class="col-span-4 bg-white border-b p-4">
    Header
  </header>
  <main class="col-span-4 row-span-5 bg-gray-50 p-6 overflow-auto">
    Main Content
  </main>
</div>

Card with Tall Image

<div class="grid grid-rows-2 grid-cols-2 gap-4 h-64">
  <img src="product.jpg" class="row-span-2 w-full h-full object-cover">
  <div class="p-4">
    <h3 class="font-bold">Product Name</h3>
  </div>
  <div class="p-4">
    <button class="bg-blue-600 text-white px-4 py-2 rounded">
      Buy Now
    </button>
  </div>
</div>

⬍ Lesson 5: Spanning Rows