CSS Grid handles two-dimensional layouts, rows and columns together, better than flexbox ever could. This lesson covers Tailwind's grid utilities for building responsive card grids, dashboards, and page layouts.
What Is Tailwind Grid?
Adding the grid class turns an element into a grid container. From there, grid-cols-* defines how many equal-width columns it has, and gap-* controls spacing between both rows and columns simultaneously.
Individual grid items can span multiple columns or rows using col-span-* and row-span-*, giving you precise control that would require much more complex markup with flexbox alone.
grid-cols-{n} creates n equal-width columns, from 1 to 12 by default.
gap-{n} sets spacing between both rows and columns; use gap-x-*/gap-y-* for one axis only.
col-span-{n} makes an item span multiple columns.
grid-cols-none and arbitrary values like grid-cols-[200px_1fr] support fully custom track sizes.
Tailwind Grid Cheatsheet
The essential grid utilities for building layouts.
Class
CSS Equivalent
Purpose
grid
display: grid
Creates a grid container
grid-cols-4
grid-template-columns: repeat(4, 1fr)
Four equal-width columns
grid-rows-3
grid-template-rows: repeat(3, 1fr)
Three equal-height rows
col-span-2
grid-column: span 2 / span 2
Item spans two columns
row-span-2
grid-row: span 2 / span 2
Item spans two rows
gap-4
gap: 1rem
Space between rows and columns
gap-x-4
column-gap: 1rem
Horizontal gap only
place-items-center
place-items: center
Centers items on both axes
grid-cols-[200px_1fr]
grid-template-columns: 200px 1fr
Custom, arbitrary column tracks
auto-cols-max
grid-auto-columns: max-content
Sizes implicit columns to their content
Responsive Column Counts
Just like other Tailwind utilities, grid-cols-* accepts responsive prefixes, letting you show fewer columns on mobile and more as the screen grows, the most common pattern for card and product grids.
Combining grid-cols-* with col-span-* and row-span-* lets you build asymmetric dashboard layouts, like a large featured widget beside several smaller ones, all within one grid container.
Arbitrary value syntax lets you use raw CSS Grid functions like repeat() and minmax() directly in a class name, creating grids that automatically fit as many columns as space allows, without any breakpoint prefixes at all.
This single class automatically adjusts the number of columns based on available width, no breakpoints needed.
Common Mistakes
Reaching for Grid when a simple flex row would solve a one-dimensional layout more simply.
Forgetting gap-*, then manually adding margin to grid children, which breaks alignment at the container edges.
Using col-span-* values larger than the container's grid-cols-* count, which has undefined or unexpected results.
Not testing responsive column counts across every breakpoint, only checking mobile and the widest desktop size.
Overcomplicating a layout with named grid areas when simple numbered columns and spans would be clearer.
Key Takeaways
grid plus grid-cols-* creates a two-dimensional layout with equal-width columns by default.
col-span-* and row-span-* let individual items span multiple tracks.
Responsive prefixes on grid-cols-* are the standard way to build adaptive card grids.
Arbitrary values unlock raw CSS Grid functions like minmax() and repeat() for auto-sizing layouts.
Choose Grid for two-dimensional layouts and Flexbox for simpler one-dimensional rows or columns.
Pro Tip
For card grids that need to "just work" at any width without picking specific breakpoints, try grid-cols-[repeat(auto-fit,minmax(220px,1fr))] instead of manually setting column counts per breakpoint.
You now understand Tailwind's grid utilities for two-dimensional layouts. Next, learn Tailwind's margin utilities for controlling outer spacing.