CSS Grid lays out items in rows and columns at once. Both axes are under your control.
When to use
Dashboards, photo galleries, page layouts, and anywhere you need two-dimensional alignment.
Core concepts
- grid-template-columns and grid-template-rows define track sizes.
- fr units distribute leftover space proportionally between tracks.
- justify-items and align-items position items inside their grid cells.
- auto-fit and minmax build responsive grids without media queries.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Responsive auto-fit
grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-4Cards reflow without media queries. minmax sets a floor; fr absorbs leftover width.
Sidebar layout
grid grid-cols-[14rem_1fr] gap-6 min-h-dvhFixed sidebar track + fluid main. Both columns share row height by default.
Summary
- Grid controls two axes at once (rows and columns), making it ideal for page layouts, dashboards, and galleries.
- grid-template-columns defines track sizes. fr splits leftover space; minmax() and auto-fit build responsive grids without media queries.
- justify-items and align-items position content inside each cell. The grid container still owns the track structure.
- Gap works the same as in flexbox but applies to both row and column gutters uniformly.
- Reach for grid when you need explicit rows and columns; reach for flex when you need a single flexible axis.