Tailwind CSS Grid Guide Complete CSS Grid Utilities Reference
Tailwind CSS grid utilities make building complex two-dimensional layouts effortless. This guide covers every grid class in Tailwind CSS with practical examples for responsive card grids, dashboard layouts, and advanced spanning patterns used in modern web design.
💡 Quick Answer
Using Tailwind CSS Grid: Apply grid for a grid container, grid-cols-3 for 3 columns, gap-4 for spacing, and col-span-2 to span items. Use responsive prefixes like md:grid-cols-3 for responsive grids that adapt to screen size.
Grid Utilities Reference
| Category | Class | CSS | Effect |
|---|---|---|---|
| Container | grid | display: grid | Creates grid container |
| Columns | grid-cols-1 | grid-template-columns: repeat(1, 1fr) | 1 column |
grid-cols-2 | repeat(2, 1fr) | 2 equal columns | |
grid-cols-3 | repeat(3, 1fr) | 3 equal columns | |
grid-cols-4 | repeat(4, 1fr) | 4 equal columns | |
| Rows | grid-rows-2 | grid-template-rows: repeat(2, 1fr) | 2 equal rows |
grid-rows-3 | repeat(3, 1fr) | 3 equal rows | |
grid-rows-none | grid-template-rows: none | No explicit rows | |
| Spanning | col-span-2 | grid-column: span 2 | Span 2 columns |
col-span-full | grid-column: 1 / -1 | Span all columns | |
row-span-2 | grid-row: span 2 | Span 2 rows | |
| Gap | gap-4 | gap: 1rem | 16px all gaps |
gap-x-6 | column-gap: 1.5rem | 24px column gaps | |
gap-y-4 | row-gap: 1rem | 16px row gaps |
Common Grid Layout Patterns
Responsive Card Grid
html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-6 bg-gray-800 rounded-lg">Card 1</div>
<div class="p-6 bg-gray-800 rounded-lg">Card 2</div>
<div class="p-6 bg-gray-800 rounded-lg">Card 3</div>
<div class="p-6 bg-gray-800 rounded-lg">Card 4</div>
<div class="p-6 bg-gray-800 rounded-lg">Card 5</div>
<div class="p-6 bg-gray-800 rounded-lg">Card 6</div>
</div>Dashboard Layout with Spanning
html
<div class="grid grid-cols-4 gap-4">
<div class="col-span-4 p-6 bg-gray-800 rounded-lg">Header (full width)</div>
<div class="col-span-1 p-6 bg-gray-800 rounded-lg">Sidebar</div>
<div class="col-span-3 p-6 bg-gray-800 rounded-lg">Main Content</div>
<div class="col-span-2 p-6 bg-gray-800 rounded-lg">Chart 1</div>
<div class="col-span-2 p-6 bg-gray-800 rounded-lg">Chart 2</div>
</div>Auto-fit Grid (No Breakpoints Needed)
html
<!-- Automatically adjusts columns based on available space -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
<div class="p-6 bg-gray-800 rounded-lg">Auto-sized card</div>
<div class="p-6 bg-gray-800 rounded-lg">Auto-sized card</div>
<div class="p-6 bg-gray-800 rounded-lg">Auto-sized card</div>
<div class="p-6 bg-gray-800 rounded-lg">Auto-sized card</div>
</div>Grid vs Flexbox: When to Use Each
| Criteria | CSS Grid | Flexbox |
|---|---|---|
| Layout Type | Two-dimensional | One-dimensional |
| Best For | Page layouts, card grids, dashboards | Nav bars, toolbars, single rows |
| Item Sizing | Explicit column/row control | Content-based or flex ratios |
| Spanning | col-span, row-span | Not available |
| Gap Support | gap-4 | gap-4 |
| Responsive | md:grid-cols-3 | md:flex-row |
Frequently Asked Questions
Use the grid class to create a grid container, then define columns with grid-cols-{n}. Example: <div class="grid grid-cols-3 gap-4"> creates a 3-column grid with 16px gaps. Add responsive prefixes like grid-cols-1 md:grid-cols-2 lg:grid-cols-3 for responsive layouts.
Flexbox (flex) is best for one-dimensional layouts arranging items in a single row or column. Grid (grid) is designed for two-dimensional layouts controlling both rows and columns simultaneously. Use flex for navigation bars and simple row layouts. Use grid for card grids, dashboards, and complex page structures.
Use responsive prefixes on grid-cols. The most common pattern is grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 this shows 1 column on mobile, 2 on tablet, and 3 on desktop. Add gap-4 for spacing between grid items.
Use col-span-{n} to make an item span multiple columns. col-span-2 spans 2 columns, col-span-full spans all columns. Combine with grid-cols for complex layouts: in a grid-cols-4 layout, use col-span-2 for half-width items and col-span-4 for full-width items.
Tailwind CSS v4 does not include auto-fit/auto-fill utilities by default, but you can achieve similar results using arbitrary values: grid-cols-[repeat(auto-fill,minmax(250px,1fr))]. This creates a responsive grid that automatically adjusts column count based on available space without media queries.
Also explore the Tailwind CSS Flexbox Guide for one-dimensional layouts, or browse the complete cheat sheet.