Span
- Make grid items span multiple rows or columns.
What Does “Span” Mean in CSS Grid?
In a grid layout, every item lives inside a cell by default.
Span means:
An item can stretch across multiple columns
Or stretch across multiple rows
In simple words:
Span = “How much grid space does this item cover?”
In Tailwind CSS, span is controlled using col-span-* and row-span-* utilities.
Why Span Is Important in Real Layouts
Span is used everywhere in real projects:
Sidebars wider than cards
Featured content blocks
Dashboards with mixed widget sizes
Hero sections
Asymmetrical layouts
Without span, all grid items look equal and boring.
Column Span (col-span-*)
What Is Column Span ?
Column span controls how many columns an item occupies horizontally.
Syntax:
col-span-{number}
Grid Column Span
col-span-2 makes the element span across two grid columns.
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 bg-blue-200 p-4">
Spans 2 columns
</div>
<div class="bg-green-200 p-4">1 column</div>
<div class="bg-red-200 p-4">1 column</div>
</div>Grid has:
4 columns total
First item takes 2 columns
Others take 1 column each
Full Width Column Span
col-span-3 makes the element span across all three grid columns.
<div class="grid grid-cols-3 gap-4">
<div class="col-span-3 bg-purple-200 p-4">
Full width
</div>
</div>Used for:
Headers
Section titles
Alerts
Common Column Span Utilities
Class Meaning col-span-1 1 column col-span-2 2 columns col-span-3 3 columns col-span-full All columns col-span-full is especially useful in responsive layouts.
Row Span (row-span-*)
What is Row Span ?
Row span controls how many rows an item occupies vertically.
Syntax:
row-span-{number}
Row span works only when:
Grid rows exist
Height is constrained or auto-generated
Grid Row Span
row-span-2 makes the element span across two grid rows.
<div class="grid grid-cols-3 grid-rows-3 gap-4 h-64">
<div class="row-span-2 bg-blue-200 p-4">
Spans 2 rows
</div>
<div class="bg-green-200 p-4">Item</div>
<div class="bg-red-200 p-4">Item</div>
<div class="bg-yellow-200 p-4">Item</div>
<div class="bg-pink-200 p-4">Item</div>
</div>Meaning:
Grid has 3 rows
First item occupies vertical space of 2 rows
When Row Span is Useful
Row span is used for:
Tall sidebar cards
Featured widgets
Dashboard analytics
Masonry-style layouts
Column Span vs Row Span
Feature Column Span Row Span Direction Horizontal Vertical Common usage Very common Less common Layout impact Width Height Requires grid rows No Yes Rule:
Column span is used more often than row span.
Grid Column and Row Span
col-span-2 and row-span-2 allow the element to occupy multiple columns and rows in the grid.
<div class="grid grid-cols-4 grid-rows-3 gap-4 h-80">
<div class="col-span-2 row-span-2 bg-blue-200 p-4">
Big feature block
</div>
<div class="bg-green-200 p-4">Item</div>
<div class="bg-red-200 p-4">Item</div>
<div class="bg-yellow-200 p-4">Item</div>
<div class="bg-purple-200 p-4">Item</div>
</div>Used in:
Dashboards
Media layouts
Admin panels
Responsive Grid Column Span
md:col-span-* changes column span based on screen size for responsive layouts.
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="md:col-span-3 bg-blue-200 p-4">
Main Content
</div>
<div class="md:col-span-1 bg-gray-200 p-4">
Sidebar
</div>
</div>Meaning:
Mobile → stacked
Desktop → sidebar layout
This is real-world responsive design.
Auto Placement & Span Interaction
When you use span:
Grid automatically adjusts placement
Remaining items flow into available cells
Grid handles placement intelligently - no hacks required.
Grid Span Layouts
col-span-* and row-span-* help structure layouts like blogs and dashboards.
<!-- Blog Layout -->
<div class="grid grid-cols-3 gap-6">
<article class="col-span-2">Main article</article>
<aside class="col-span-1">Sidebar</aside>
</div>
<!-- Dashboard Widgets -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 row-span-2">Analytics</div>
<div>Stats</div>
<div>Stats</div>
</div>Common Mistakes
Spanning more columns than exist
Using row span without defining rows or height
Overusing spans unnecessarily
Creating confusing layouts
Forgetting responsive resets
Span should enhance layout, not complicate it.
Best Practices for Span Usage
Plan grid structure first
Use column span more than row span
Keep spans readable
Reset spans responsively when needed
Avoid excessive asymmetry