1 min lesson
Modern CSS & pixel-perfect layout
Put this idea into your own words. "A build round, if your loop has one, is where polish shows, and polish lives in CSS."
Step 1 of 3
A build round, if your loop has one, is where polish shows, and polish lives in CSS. You should reach for the right layout primitive without thinking, theme with custom properties and have opinions about the half-pixel.
Flexbox and Grid are not interchangeable. Flexbox lays out along one axis and is content-driven; Grid defines a two-dimensional structure the content slots into. Reach for Flexbox for a toolbar or a row of pills, Grid for a panel layout or anything where rows and columns must align across siblings.
Learn more
Advanced table
Reference table
- Tool
- Flexbox
- Best at
- One-axis distribution: toolbars, button rows, sidebars
- Tell that it's the wrong choice
- You're adding margins to fake a grid, and the columns won't stay aligned
- Tool
- Grid
- Best at
- Two-axis structure: app shells, card layouts, form rows
- Tell that it's the wrong choice
- You only have a single row and no alignment across siblings to maintain
- Tool
- Subgrid
- Best at
- Child aligning to the parent grid's tracks (label/control rows that line up)
- Tell that it's the wrong choice
- There's nothing to align to, so a plain grid is simpler
- Tool
- Container queries
- Best at
- A component that must adapt to its container, not the viewport
- Tell that it's the wrong choice
- The whole page reflows together, so a media query is the honest tool
| Tool | Best at | Tell that it's the wrong choice |
|---|---|---|
| Flexbox | One-axis distribution: toolbars, button rows, sidebars | You're adding margins to fake a grid, and the columns won't stay aligned |
| Grid | Two-axis structure: app shells, card layouts, form rows | You only have a single row and no alignment across siblings to maintain |
| Subgrid | Child aligning to the parent grid's tracks (label/control rows that line up) | There's nothing to align to, so a plain grid is simpler |
| Container queries | A component that must adapt to its container, not the viewport | The whole page reflows together, so a media query is the honest tool |
Most layout mistakes are picking the one-axis tool for a two-axis problem.
Learn more
Optional practice
Test yourself on Modern CSS & pixel-perfect layout
QA card inside a resizable sidebar must stack its contents when the sidebar narrows, whatever the viewport width. Which tool fits?