Lesson 4: Spanning Columns | Gridlock Holmes

What is Column Spanning?

Sometimes you want a grid item to take up more than one column. For example, in a 3-column layout, you might want a header to span all 3 columns, or a featured item to span 2 columns while others span 1.

Tailwind makes this easy with col-span utilities. These tell an item how many columns to occupy.

The col-span Classes

Tailwind provides col-span-* classes from 1 to 12:

col-span-1 - Span 1 column (default)
col-span-2 - Span 2 columns
col-span-3 - Span 3 columns
col-span-4 - Span 4 columns
... up to col-span-12
col-span-full - Span all columns (very useful!)

💡 How It Works:

col-span-2 means "this item occupies 2 column tracks in the grid." If your grid has 4 columns total, a col-span-2 item takes up half the width.

Basic Example

Here's a simple 3-column grid where the first item spans 2 columns:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 bg-blue-500 text-white p-4">
    Spans 2 columns
  </div>
  <div class="bg-green-500 text-white p-4">
    Spans 1 column
  </div>
  <div class="bg-purple-500 text-white p-4">Item 3</div>
  <div class="bg-purple-500 text-white p-4">Item 4</div>
  <div class="bg-purple-500 text-white p-4">Item 5</div>
</div>

The first item takes up 2 of the 3 columns. The second item takes the remaining column. Items 3, 4, and 5 each take 1 column.

The col-span-full Class

Want an item to span the entire width regardless of how many columns? Use col-span-full:

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-full bg-blue-600 text-white p-4 text-center">
    Header - Spans All 4 Columns
  </div>
  <div class="bg-gray-300 p-4">Column 1</div>
  <div class="bg-gray-300 p-4">Column 2</div>
  <div class="bg-gray-300 p-4">Column 3</div>
  <div class="bg-gray-300 p-4">Column 4</div>
</div>

col-span-full is especially useful because it works regardless of your column count. If you change from 4 columns to 6 columns, the header still spans the full width!

Real-World Pattern: Featured Card

A common design pattern is having one large featured item and several smaller items:

<div class="grid grid-cols-4 gap-6">
  <!-- Featured card spans 2 columns -->
  <div class="col-span-2 bg-gradient-to-br from-blue-500 to-purple-600 
              text-white p-8 rounded-lg">
    <h2 class="text-2xl font-bold mb-2">Featured Article</h2>
    <p>This is our top story of the day...</p>
  </div>
  
  <!-- Regular cards span 1 column each -->
  <div class="bg-white p-6 rounded-lg shadow">
    <h3 class="font-bold mb-2">Article 2</h3>
    <p class="text-sm">Short description...</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow">
    <h3 class="font-bold mb-2">Article 3</h3>
    <p class="text-sm">Short description...</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow">
    <h3 class="font-bold mb-2">Article 4</h3>
    <p class="text-sm">Short description...</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow">
    <h3 class="font-bold mb-2">Article 5</h3>
    <p class="text-sm">Short description...</p>
  </div>
</div>

Responsive Column Spanning

You can change how many columns an item spans at different screen sizes:

<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
  <div class="col-span-1 md:col-span-2 bg-blue-500 text-white p-4">
    Mobile: 1 column (full width)
    Tablet+: 2 columns
  </div>
  <div class="col-span-1 bg-green-500 text-white p-4">Column 2</div>
  <div class="col-span-1 bg-green-500 text-white p-4">Column 3</div>
</div>

On mobile: Grid is 1 column, so all items stack vertically.

On tablet and up: Grid is 4 columns. First item spans 2, others span 1 each.

⚠️ Important:

Make sure your column spans don't exceed your total columns! If you have grid-cols-3, using col-span-4 won't work as expected.

Complex Layout: Dashboard Header

Let's build a dashboard header where different sections have different widths:

<div class="grid grid-cols-12 gap-4">
  <!-- Logo spans 2 columns -->
  <div class="col-span-2 bg-blue-600 text-white p-4 flex items-center justify-center">
    Logo
  </div>
  
  <!-- Search bar spans 6 columns (half the width) -->
  <div class="col-span-6 bg-gray-200 p-4 flex items-center">
    Search bar...
  </div>
  
  <!-- User menu spans 4 columns -->
  <div class="col-span-4 bg-gray-300 p-4 flex items-center justify-end">
    User Menu
  </div>
</div>

Using a 12-column grid gives you fine control over proportions: 2+6+4 = 12 columns total.

Mixing Spans in One Row

You can mix different span sizes freely:

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-3 bg-blue-400 p-4">Spans 3 (half)</div>
  <div class="col-span-2 bg-green-400 p-4">Spans 2</div>
  <div class="col-span-1 bg-purple-400 p-4">1</div>
  
  <div class="col-span-4 bg-red-400 p-4">Spans 4</div>
  <div class="col-span-2 bg-yellow-400 p-4">Spans 2</div>
</div>

As long as each row adds up to your total columns (6 in this case), the grid flows naturally.

✅ Pro Tip:

Use a 12-column grid (grid-cols-12) for maximum flexibility. It divides evenly by 2, 3, 4, and 6, making it perfect for creating varied layouts!

Common Patterns

Sidebar Layout

<div class="grid grid-cols-4 gap-6">
  <aside class="col-span-1 bg-gray-200 p-6">
    Sidebar
  </aside>
  <main class="col-span-3 bg-white p-6">
    Main content (spans 3 columns = 75% width)
  </main>
</div>

Image Gallery with Featured Image

<div class="grid grid-cols-3 gap-2">
  <img class="col-span-2 row-span-2 w-full h-full object-cover" src="featured.jpg">
  <img class="w-full h-48 object-cover" src="photo1.jpg">
  <img class="w-full h-48 object-cover" src="photo2.jpg">
  <img class="w-full object-cover" src="photo3.jpg">
  <img class="w-full object-cover" src="photo4.jpg">
</div>

(Note: We're introducing row-span-2 here, which we'll cover in the next lesson!)

Practice Exercise

Try building a blog layout with:

A full-width header (col-span-full)
One featured post spanning 2 columns
Two smaller posts spanning 1 column each

↔️ Lesson 4: Spanning Columns