Tailwind CSS Grid
Build complex layouts with CSS Grid in Tailwind
What you'll learn
Create grid layouts with Tailwind's grid-template utilities
Use grid-column and grid-row span utilities
Build responsive grids without media queries using auto-fit
Control gap, alignment, and item placement
Create asymmetric layouts with explicit grid placement
Combine Tailwind grid utilities with responsive prefixes
CSS Grid is a two-dimensional layout system that handles rows and columns simultaneously. Tailwind provides utilities for every Grid property.
Basic Grid
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4">Item 1</div>
<div class="bg-blue-100 p-4">Item 2</div>
<div class="bg-blue-100 p-4">Item 3</div>
<div class="bg-blue-100 p-4">Item 4</div>
<div class="bg-blue-100 p-4">Item 5</div>
<div class="bg-blue-100 p-4">Item 6</div>
</div>
Column Spans
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-blue-100 p-4">Wide (spans 2 columns)</div>
<div class="bg-blue-100 p-4">Normal</div>
<div class="col-span-3 bg-blue-100 p-4">Full width</div>
</div>
Responsive Grid
<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-blue-100 p-4">Card</div>
<div class="bg-blue-100 p-4">Card</div>
<div class="bg-blue-100 p-4">Card</div>
<div class="bg-blue-100 p-4">Card</div>
</div>
Auto-fit / Auto-fill
<!-- Responsive without breakpoints -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
<div class="bg-blue-100 p-4">Card</div>
<div class="bg-blue-100 p-4">Card</div>
<div class="bg-blue-100 p-4">Card</div>
<div class="bg-blue-100 p-4">Card</div>
</div>
Grid Template Areas
<div class="grid h-screen grid-rows-[auto_1fr_auto]">
<header class="bg-gray-100 p-4">Header</header>
<main class="p-4">Main Content</main>
<footer class="bg-gray-100 p-4">Footer</footer>
</div>
Best Practices
- Use Grid for two-dimensional layouts (rows + columns)
- Use Flexbox for one-dimensional layouts (single row or column)
- Use
auto-fit/minmaxfor truly responsive grids - Combine with Tailwind breakpoints for adaptive layouts
Next Steps
- Flexbox — One-dimensional layouts
- Practice Projects — Apply your skills
Key Takeaways
Tailwind's grid utilities mirror CSS Grid: grid-cols-3, col-span-2, row-span-1, gap-4
Responsive grid templates (lg:grid-cols-4, md:grid-cols-2) adapt column counts at breakpoints
grid-cols-[repeat(auto-fill,minmax(250px,1fr))] creates responsive grids without media queries
col-start-1 and col-end-3 give explicit item placement for asymmetric layouts
Combining grid utilities with responsive prefixes creates complex adaptive layouts from simple classes