Responsive Grids
- Create mobile-first responsive grid layouts.
What is a Responsive Grid Layout ?
A responsive grid layout is a grid that:
Changes column structure based on screen size
Adapts spacing and spans
Maintains usability on all devices
Instead of one fixed layout, the grid:
Collapses on small screens
Expands on larger screens
Mobile-First Approach
Tailwind follows a mobile-first design strategy.
This means:
Base classes apply to mobile
Larger screens override using prefixes
Responsive prefixes:
sm: → small screens
md: → tablets
lg: → laptops
xl: → desktops
2xl: → large screens
Responsive Grid Columns (Mobile First)
grid-cols-1 applies on mobile, sm:grid-cols-2 on small screens, and lg:grid-cols-4 on large screens.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-4 shadow">Card</div>
<div class="bg-white p-4 shadow">Card</div>
<div class="bg-white p-4 shadow">Card</div>
<div class="bg-white p-4 shadow">Card</div>
</div>Meaning:
Mobile → 1 column
Small screens → 2 columns
Large screens → 4 columns
Responsive Grid Gap
gap-3 applies spacing on small screens and md:gap-6 increases the gap on medium screens.
<div class="grid grid-cols-2 gap-3 md:gap-6">
<div>Item</div>
<div>Item</div>
</div>Meaning:
Small screens → tighter spacing
Larger screens → more breathing room
Responsive Column Spanning
md:col-span-* changes how many columns an element spans on medium screens and above.
<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 layout
Desktop → sidebar layout
This pattern appears in:
Blogs
Dashboards
Admin panels
Responsive Row Spanning
row-span-2 applies on small screens and md:row-span-1 changes the span on medium screens.
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-64">
<div class="row-span-2 md:row-span-1 bg-blue-200">
Feature
</div>
<div class="bg-green-200">Item</div>
<div class="bg-red-200">Item</div>
</div>Used carefully for:
Featured content
Media layouts
Responsive Auto Grid Layout
grid-cols-1 on mobile and md:grid-cols-3 on larger screens with auto-rows-fr for equal-height rows.
<div class="grid grid-cols-1 md:grid-cols-3 auto-rows-fr gap-6">
<div class="bg-white p-4 shadow">Card</div>
<div class="bg-white p-4 shadow">Card</div>
</div>Cards:
Stack on mobile
Align evenly on desktop
Responsive Grid and Flex Combination
grid manages the page layout while flex organizes items inside the sidebar.
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<aside class="lg:col-span-1 flex flex-col gap-4">
Sidebar items
</aside>
<main class="lg:col-span-2">
Main content
</main>
</div>Grid:
Handles page structure
Flexbox:
Handles internal alignment
Responsive Grid Patterns
Responsive grid-cols-* and col-span-* create flexible layouts for products and blogs.
<!-- Product Listing -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
<div>Product</div>
</div>
<!-- Blog Layout -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<article class="lg:col-span-8">Post</article>
<aside class="lg:col-span-4">Sidebar</aside>
</div>Common Mistakes
Designing desktop first
Forgetting to reset spans on mobile
Overusing grid-rows on small screens
Ignoring content readability
Nesting too many grids
Responsive grids should simplify UX, not complicate it.
Best Practices for Responsive Grids
Always start with mobile layout
Increase columns gradually
Adjust gaps with screen size
Use spans to create hierarchy
Combine Grid with Flex wisely
Test on real devices