Part 22: Col-Span & Row-Span for Complex Layouts

Not all items in a grid must be the same size. col-span-* and row-span-* allow individual items to stretch across multiple tracks.

1. Column Spanning (col-span-*)

In a 12-column grid system:

<div class="grid grid-cols-12 gap-4">
  <!-- Left Sidebar (3 columns) -->
  <aside class="col-span-12 md:col-span-3 bg-slate-100 p-4 rounded-lg">
    Sidebar
  </aside>

  <!-- Main Content (9 columns) -->
  <main class="col-span-12 md:col-span-9 bg-white p-6 rounded-lg shadow">
    Main Feed
  </main>
</div>

2. Creating a Modern "Bento Box" Grid

Bento grid layouts popular in modern SaaS designs combine both col-span and row-span:

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <!-- Featured Hero item spans 2 columns and 2 rows -->
  <div class="md:col-span-2 md:row-span-2 p-8 bg-blue-600 text-white rounded-2xl">
    <h3 class="text-2xl font-bold">Featured Feature</h3>
    <p class="mt-2 text-blue-100">Takes up prominence in the layout.</p>
  </div>

  <!-- Secondary cards -->
  <div class="p-6 bg-slate-100 rounded-2xl">Metric A</div>
  <div class="p-6 bg-slate-100 rounded-2xl">Metric B</div>
</div>

Key Takeaways

• Use col-span-* and row-span-* to create asymmetric layouts.
• Combine spans to produce modern Bento grid designs.

In Part 23, we will explore Grid Auto Flow, Auto Rows & Auto Columns!