Cheat sheet
CSS layout cheat sheet
Flex, Grid, gap, and clamp — the patterns you reuse weekly.
Updated 2026-05-12
Flexbox
- justify-content
- Main axis distribution: start, center, between, around.
- align-items
- Cross axis alignment for items in a line.
- min-width: 0
- Allow flex children to shrink below content size — fixes overflow bugs.
Grid
- repeat(auto-fit, minmax())
- Responsive card grids without media-query spam.
- gap
- Prefer gap over margin hacks between items.
- named areas
- grid-template-areas for editorial layouts and dashboards.
Fluid type
- clamp()
- clamp(1rem, 2vw + 1rem, 2rem) for scalable headings.
- container queries
- Style based on parent width when components move between sidebars and mains.
Never miss a drop
Get new guides on web development and AI, Prompt Lab tips, videos, downloads and exclusive deals — straight to your inbox. No spam, unsubscribe anytime.