1 min lesson
Modern CSS & pixel-perfect layout
Say what this means in practice: "The build round judges polish and polish lives in CSS."
Step 1 of 3
The build round judges polish 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 - 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 - 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 - 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 - 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 - a plain grid is simpler |
| Container queries | A component that must adapt to its container, not the viewport | The whole page reflows together - a media query is the honest tool |
Most layout mistakes are picking the one-axis tool for a two-axis problem.