CSS Grid
A two-dimensional CSS layout system for placing elements in rows and columns simultaneously.
Plain English
CSS Grid is the most powerful layout tool on the web. Unlike Flexbox (which works in one direction), Grid lets you define both rows and columns and place elements precisely anywhere in the resulting matrix. It is the natural choice for card grids, dashboards, magazine-style layouts, and anything where items need to align across both axes at once.
Technical
Activated with display: grid. Define columns with grid-template-columns (e.g. repeat(3, 1fr)), rows with grid-template-rows, and gaps with gap. Items can span multiple columns with grid-column: span 2. The auto-fill and auto-fit keywords create intrinsically responsive grids without media queries. Named grid areas via grid-template-areas enable semantic placement.
Live Demo
Mobile
< 640pxgrid-template-columns: 1frTablet
≥ 640pxgrid-template-columns: 1fr 1frDesktop
≥ 1024pxgrid-template-columns: 1fr 1fr 1frCSS Grid adapts column count at each breakpoint for responsive layouts.
Usage
✓ Good usage
Use grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) to create a responsive card grid that reflows automatically without media queries.
✗ Bad usage
Using CSS Grid for a simple horizontal nav bar — Flexbox is simpler and more appropriate for one-dimensional layouts.
Recommended values
- repeat(auto-fill, minmax(280px, 1fr)) — responsive card grid, no media queries
- repeat(12, 1fr) — design-system-style 12-column layout grid
- repeat(3, 1fr) — three-column dashboard
- grid-template-columns: 240px 1fr — fixed sidebar + fluid main area
- 1fr 1fr for simple 50/50 two-column split
Common mistakes
- Using Grid for one-dimensional layouts where Flexbox would be simpler.
- Forgetting that grid items can overlap — use z-index to control stacking when they do.
- Setting fixed pixel column widths that break on small screens — prefer fr units and minmax().
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use CSS Grid with repeat(auto-fill, minmax(300px, 1fr)) and gap: 20px for the card grid. Use a 12-column grid for the main layout with a 240px sidebar column.