Tailwind CSS Guide
Tailwind CSS Grid: The Complete Guide
Build any layout with Tailwind's grid utilities. From simple columns to complex dashboards.
Last updated: October 2026 · Tested on Tailwind v4.0
Quick answer: Add grid to a container, use grid-cols-N to define columns, use gap-N for spacing, and use col-span-N to span items. Make it responsive with breakpoint prefixes: grid-cols-1 md:grid-cols-2 lg:grid-cols-3.
Basic Grid Setup
The three essential classes for any grid:
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>grid— enables CSS Grid on the container.grid-cols-3— creates 3 equal columns.gap-4— adds 1rem spacing between items.
Custom Column Widths
For asymmetric layouts, use bracket syntax:
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">
<div>Sidebar (1fr)</div>
<div>Main (2fr)</div>
<div>Sidebar (1fr)</div>
</div>Use fr (fractional units) to make columns proportional, or use px, rem, or percentages for fixed widths.
Spanning Columns and Rows
Use col-span-N and row-span-N to make items cover multiple cells:
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Wide item</div>
<div>Item 3</div>
<div>Item 4</div>
<div class="col-span-4 row-span-2">Big feature block</div>
</div>Responsive Grids
The most common Tailwind grid pattern — responsive columns:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>This creates:
- Mobile (
md): 1 column - Tablet (
mdtolg): 2 columns - Desktop (
lgand up): 3 columns
💡 Best practice: Always start with mobile-first. Begin with grid-cols-1 and add columns at larger breakpoints.
The 12-Column Grid
The classic 12-column layout used by Bootstrap and Material Design:
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-3">Sidebar</div>
<div class="col-span-12 md:col-span-9">Main content</div>
</div>12 columns give you flexible proportions: 1/2 (6+6), 1/3 (4+4+4), 1/4 (3+3+3+3), 2/3 (8+4), and so on.
Real-World: Dashboard Layout
A common dashboard layout using grid:
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Stat cards -->
<div class="bg-slate-800 p-4 rounded">Sales</div>
<div class="bg-slate-800 p-4 rounded">Users</div>
<div class="bg-slate-800 p-4 rounded">Revenue</div>
<!-- Main chart (spans 2 columns) -->
<div class="col-span-1 md:col-span-2 bg-slate-800 p-4 rounded h-64">
Chart
</div>
<!-- Side panel -->
<div class="bg-slate-800 p-4 rounded h-64">
Recent Activity
</div>
</div>🎯 Grid vs Flexbox: When to Use Which
| Use Case | Grid | Flexbox |
|---|---|---|
| 2D layouts (rows AND columns) | ✅ Best | Harder |
| 1D layouts (single row or column) | Overkill | ✅ Best |
| Card grids, dashboards | ✅ Best | Possible |
| Navbars, toolbars, buttons | Possible | ✅ Best |
🛡️ Best Practices
- Always start mobile-first:
grid-cols-1 md:grid-cols-3. - Use
gap-Nfor spacing, not margins on children. - Use
col-span-Ninside agrid-cols-12container for flexible proportions. - Combine Grid (layout) and Flexbox (alignment within cells).
- Use
grid-auto-flow-densefor masonry-style layouts (with caution).
Common mistake: Using grid-cols-N without grid on the container. The grid class is required for any grid-col utility to work.
❓ Frequently Asked Questions
How do I use Tailwind grid?
Add the grid class to a container, then use grid-cols-N to define columns. Use gap-N for spacing and col-span-N for spanning items.
What is the difference between grid-cols-3 and grid-cols-[1fr_2fr_1fr]?
grid-cols-3 creates three equal columns. The bracket syntax grid-cols-[1fr_2fr_1fr] creates custom columns with different widths. Use brackets for asymmetric layouts.
How do I make a Tailwind grid responsive?
Use breakpoint prefixes: grid-cols-1 md:grid-cols-2 lg:grid-cols-3. Start with 1 column on mobile and add more columns at larger breakpoints.
Can I use CSS Grid and Flexbox together in Tailwind?
Yes. A common pattern is using Grid for the overall page layout and Flexbox for individual components. Both work great together.
What is the 12-column grid in Tailwind?
Use grid-cols-12 to create a 12-column grid. This is the classic layout system used by Bootstrap and other frameworks. Then use col-span-N to place items.