Tailwind CSS Grid Layout: Complete Guide 2026
CSS Grid is the most powerful layout system on the web, and Tailwind CSS makes it simple to use with intuitive utility classes. In this guide, you will learn every Tailwind grid utility, see real-world layout patterns, and understand when to choose grid over flexbox.
Grid vs Flexbox: When to Use Each
Both CSS Grid and Flexbox are available in Tailwind CSS. Choosing the right one for a layout is important:
Use CSS Grid When
- • You need a 2D layout (rows AND columns)
- • Cards must align to a strict grid
- • You have a defined number of columns
- • Building page-level layouts (sidebars, dashboards)
- • You need cells to span multiple columns/rows
Use Flexbox When
- • Layout flows in a single axis (row OR column)
- • Items wrap to multiple rows but don't need column alignment
- • You need items to shrink/grow based on content
- • Building component-level layouts (navbar, button groups)
- • Centering a single element in a container
Rule of thumb: Use grid for page sections and card collections. Use flex for component internals (nav items, button rows, card footers).
All Tailwind CSS Grid Classes
gridActivates CSS Gridgrid-cols-1Single columngrid-cols-2Two equal columnsgrid-cols-3Three equal columnsgrid-cols-4Four equal columnsgrid-cols-1212-column grid (Bootstrap-style)grid-cols-noneNo defined columns (auto flow)gap-416px gap between all cellsgap-x-624px horizontal gap onlygap-y-832px vertical gap onlycol-span-2Cell spans 2 columnscol-span-fullCell spans all columnsrow-span-2Cell spans 2 rowscol-start-2Cell starts at column line 2items-startAlign cell content to startitems-centerVertically center all cellsResponsive Grid Layouts in Tailwind CSS
Tailwind CSS is mobile-first. Column classes without a prefix apply to all screen sizes; prefixed classes apply at that breakpoint and above. A common 3-column responsive grid:
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Mobile: 1 col | Tablet: 2 cols | Desktop: 3 cols */}
<div className="border rounded-xl p-6">Card 1</div>
<div className="border rounded-xl p-6">Card 2</div>
<div className="border rounded-xl p-6">Card 3</div>
<div className="border rounded-xl p-6">Card 4</div>
<div className="border rounded-xl p-6">Card 5</div>
<div className="border rounded-xl p-6">Card 6</div>
</div>You can use any column count at any breakpoint. Common patterns:grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 for 4-column dashboards,grid-cols-1 md:grid-cols-3 for 3-column pricing tables.
Column and Row Spanning in Tailwind CSS
Use col-span-{n} and row-span-{n} to make cells span multiple columns or rows:
{/* Magazine layout: featured post spans 2 of 3 columns */}
<div className="grid grid-cols-3 gap-6">
<div className="col-span-2 row-span-2 border rounded-xl p-6 bg-cyan-50">
Featured Article (large)
</div>
<div className="border rounded-xl p-4">Small Article 1</div>
<div className="border rounded-xl p-4">Small Article 2</div>
</div>
{/* Full-width banner in a 4-column grid */}
<div className="grid grid-cols-4 gap-4">
<div className="col-span-full border rounded-xl p-6">Full-Width Banner</div>
<div className="border rounded-xl p-4">Col 1</div>
<div className="border rounded-xl p-4">Col 2</div>
<div className="border rounded-xl p-4">Col 3</div>
<div className="border rounded-xl p-4">Col 4</div>
</div>6 Real-World Tailwind CSS Grid Layouts
3-Column Component Grid
Used for card grids (features, team, products). 1 column on mobile, 2 on tablet, 3 on desktop.
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6Sidebar + Main Content
Navigation or filters on the left, main content on the right. 1 column on mobile, sidebar on lg+.
grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8Magazine / Editorial Layout
Featured large card spanning 2 columns, smaller cards beside/below it.
grid grid-cols-1 md:grid-cols-3 gap-6 → first card: md:col-span-2Dashboard Stat Cards
4-column stats row on desktop, 2-column on tablet, 1-column on mobile.
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4Photo / Image Gallery
Auto-fill grid where each cell is at least 250px wide. Fills available space automatically.
grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4Pricing Table (3 plans)
Three equal-width pricing cards. The middle highlighted card may scale slightly larger.
grid grid-cols-1 md:grid-cols-3 gap-6 items-startAuto-Fill and Auto-Fit Grids
Tailwind supports arbitrary CSS Grid values with square-bracket syntax. The most powerful is the auto-fill grid that creates as many columns as fit at a minimum size:
{/* Auto-fill: creates as many columns as fit at 250px minimum */}
<div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
<div className="border rounded-xl p-4">Item 1</div>
<div className="border rounded-xl p-4">Item 2</div>
{/* Items automatically wrap to next row when needed */}
</div>
{/* Auto-fit: similar but collapses empty columns */}
<div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
{/* On wide screens, fewer items will stretch to fill the row */}
</div>auto-fill is usually preferred for card grids — it preserves column structure even when there are fewer items than columns. auto-fit stretches items to fill empty columns.
Frequently Asked Questions
How do I center content in a Tailwind CSS grid cell?
Use place-items-center on the grid container to center all cells. Or use place-self-center on an individual cell. For flex-based centering inside a cell, add flex items-center justify-center to the cell itself.
Can Tailwind CSS grid handle nested grids?
Yes. Any grid cell can itself be a grid container. Add grid and grid-cols-* to a child element. There are no limitations on nesting depth.
How do I create an equal-height row of cards with Tailwind Grid?
Grid cells in the same row are automatically equal height. The content inside may not fill the full cell height — use flex flex-col on the card and mt-auto on the footer to push it to the bottom.
What is the difference between grid-cols-3 and columns-3 in Tailwind?
grid-cols-3 uses CSS Grid and creates three equal column tracks. Items flow row by row. columns-3 uses CSS Multi-column layout which creates a masonry-style flow where items fill columns top-to-bottom. Use grid-cols for card grids; use columns for masonry/article layouts.
See Tailwind CSS Grid in Action
Browse our free components — all built with responsive Tailwind CSS grid layouts.