Tailwind CSS Academy · Lesson

Column and Row Spanning

Make items span multiple columns or rows using col-span-* and row-span-* utilities for complex grid arrangements.

What Is Spanning in Grid?

By default, each child of a CSS Grid container occupies exactly one column and one row. Spanning lets a single grid item stretch across multiple columns or rows to create asymmetric, magazine-style layouts. Tailwind provides col-span-* and row-span-* utilities that translate directly to grid-column: span N and grid-row: span N in CSS.

<!-- Item spans 2 columns out of a 4-column grid -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-blue-200 p-4">Wide item</div>
  <div class="bg-blue-100 p-4">Normal</div>
  <div class="bg-blue-100 p-4">Normal</div>
</div>

col-span-* Utilities

Tailwind ships with col-span-1 through col-span-12 as well as col-span-full, which spans all available columns. Apply these utilities to a grid child, not the container. For example, in a 12-column grid, col-span-8 gives you a main content area and the remaining 4 columns can hold a sidebar — a common two-pane layout pattern.

<!-- Classic 8 + 4 main/sidebar layout -->
<div class="grid grid-cols-12 gap-6">
  <main class="col-span-8 bg-white p-6 rounded shadow">
    Main Content
  </main>
  <aside class="col-span-4 bg-gray-100 p-6 rounded">
    Sidebar
  </aside>
</div>

All lessons in this course

← Back to Tailwind CSS Academy