Grid Utilities
Learn how to build two-dimensional layouts with Tailwind CSS grid utilities, including grid-cols-*, col-span-*, and grid gap utilities.
Introduction
CSS grid is built for two-dimensional layouts, arranging content into rows and columns at the same time. Tailwind exposes grid through utilities like grid, grid-cols-*, col-span-*, and row-span-*, letting you build dashboards, image galleries, and pricing tables without writing custom CSS grid-template rules.
- How to turn a container into a grid.
- How to define a fixed number of columns.
- How to make an item span multiple columns or rows.
- How to space grid items with gap utilities.
- When to reach for grid instead of flexbox.
Enabling Grid
Add the grid class to any element to make it a grid container (display: grid;). On its own, grid does not create any columns yet — you pair it with a grid-cols-* utility to define the column structure.
<div class="grid grid-cols-3 gap-4 bg-slate-100 p-4 rounded-lg"> <div class="bg-indigo-500 text-white p-4">1</div> <div class="bg-indigo-600 text-white p-4">2</div> <div class="bg-indigo-700 text-white p-4">3</div> <div class="bg-indigo-500 text-white p-4">4</div> <div class="bg-indigo-600 text-white p-4">5</div> <div class="bg-indigo-700 text-white p-4">6</div></div>Click Run to see what this code prints.
Defining Columns
grid-cols-{n} creates n equal-width columns, from grid-cols-1 up to grid-cols-12. Each column is generated with a fractional unit (1fr), so they automatically share the available width equally, no matter how many columns you use.
<div class="grid grid-cols-4 gap-3 bg-slate-100 p-4 rounded-lg"> <div class="bg-teal-600 text-white p-4 text-center">Jan</div> <div class="bg-teal-600 text-white p-4 text-center">Feb</div> <div class="bg-teal-600 text-white p-4 text-center">Mar</div> <div class="bg-teal-600 text-white p-4 text-center">Apr</div></div>Click Run to see what this code prints.
Spanning Columns
Sometimes one item needs to be wider than the rest. col-span-{n} makes a grid item stretch across n columns instead of just one, which is perfect for a hero card in a grid of smaller tiles.
<div class="grid grid-cols-3 gap-4 bg-slate-100 p-4 rounded-lg"> <div class="col-span-2 bg-fuchsia-600 text-white p-6">Featured Article</div> <div class="bg-fuchsia-400 text-white p-6">Sidebar</div> <div class="bg-fuchsia-500 text-white p-6">Article</div> <div class="bg-fuchsia-500 text-white p-6">Article</div></div>Click Run to see what this code prints.
Spanning Rows
row-span-{n} works the same way as col-span-*, but along the vertical axis, making an item stretch across multiple rows. This is common in masonry-style layouts or dashboards where one card (like a chart) needs to be taller than its neighbors.
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-64 bg-slate-100 p-4 rounded-lg"> <div class="row-span-2 bg-cyan-600 text-white p-4">Tall Chart</div> <div class="bg-cyan-400 text-white p-4">Stat A</div> <div class="bg-cyan-400 text-white p-4">Stat B</div> <div class="bg-cyan-500 text-white p-4">Stat C</div> <div class="bg-cyan-500 text-white p-4">Stat D</div></div>Click Run to see what this code prints.
Gap in Grid Layouts
Just like with flexbox, gap-*, gap-x-*, and gap-y-* control the spacing between grid cells in both directions. Using gap instead of margins keeps spacing perfectly even even when items span multiple columns or rows.
<div class="grid grid-cols-3 gap-x-6 gap-y-2 bg-slate-100 p-4 rounded-lg"> <div class="bg-amber-500 text-white p-4">1</div> <div class="bg-amber-500 text-white p-4">2</div> <div class="bg-amber-500 text-white p-4">3</div> <div class="bg-amber-600 text-white p-4">4</div> <div class="bg-amber-600 text-white p-4">5</div> <div class="bg-amber-600 text-white p-4">6</div></div>Click Run to see what this code prints.
Grid vs Flexbox
A common question is when to use grid versus flex. As a rule of thumb: reach for flex when you are arranging items along a single row or column, like a navbar or a button group. Reach for grid when you need precise control over both rows and columns at once, like a photo gallery, dashboard, or pricing table.
| Scenario | Recommended Tool |
|---|---|
| Navbar with logo and links | flex |
| Photo gallery grid | grid |
| Form with label and input side by side | flex |
| Dashboard with cards of varying sizes | grid |
| Centering a single element | flex |
Common Mistakes
- Forgetting the grid class — grid-cols-* alone does nothing without display: grid.
- Using col-span-{n} with a value larger than the number of columns defined by grid-cols-{n}.
- Reaching for grid-cols-12 everywhere out of habit when a simpler grid-cols-3 or grid-cols-4 would be clearer.
- Forgetting that grid items do not automatically shrink like flex items — explicit column tracks control their width.
- Mixing up col-span-* (columns) with row-span-* (rows) when building tall feature cards.
Best Practices
- Pick the smallest grid-cols-{n} value that matches your design (3, 4, or 6 are common choices).
- Use col-span-* sparingly to highlight one or two featured items rather than every item.
- Prefer gap-* over margins for consistent spacing in both directions.
- Combine grid utilities with responsive prefixes so a 4-column grid can collapse to 1 column on mobile.
- Reach for CSS grid, not nested flexbox, whenever a layout genuinely needs two dimensions.
Frequently Asked Questions
By default Tailwind includes grid-cols-1 through grid-cols-12, plus grid-cols-none. You can add custom values in tailwind.config.js if you need more.
Yes. It is very common to have a grid container whose individual cells are themselves flex containers, for example centering content inside each card.
Tailwind's default utilities cover fixed column counts, but you can use arbitrary value syntax like grid-cols-[repeat(auto-fit,minmax(200px,1fr))] for auto-fit and auto-fill behavior.
Key Takeaways
- grid enables CSS grid layout on a container.
- grid-cols-{n} defines n equal-width columns.
- col-span-{n} and row-span-{n} let individual items span multiple tracks.
- gap-*, gap-x-*, and gap-y-* control spacing between grid cells.
- Use grid for two-dimensional layouts and flex for single-row or single-column layouts.
Summary
Grid utilities give you the same declarative power CSS grid offers in plain CSS, without ever leaving your markup. With grid, grid-cols-*, col-span-*, and gap-*, you can build complex, professional layouts in minutes. Next, you will learn how to make any layout responsive across screen sizes using Tailwind's breakpoint prefixes.