Key insights
- Start from a 12-column grid — it's the web standard because 12 divides cleanly into halves, thirds, quarters, and sixths, so almost any layout maps onto it.
- Use column ratios to structure the page: 4:8 for a sidebar plus content, 6:6 for an even split, 3:9 for a narrow nav beside a wide canvas.
- Gutters set the mood as much as the columns do — 8px reads dense and technical, 24px feels balanced and clean, 40px gives an editorial, premium feel.
- Stay responsive by dropping columns at each breakpoint: 12 at desktop, 6 on tablet, 4 on large phones, down to a single stacked column on the smallest screens.
- Once the grid is solid, break it on purpose — let a hero image bleed full-width or push a pull quote into the margin for deliberate emphasis.
- Alignment is what separates polished from amateur: chaotic, slightly-rotated elements snapped to shared column edges instantly read as designed.
Do / Don't
- Do: Anchor every element to shared column edges so the layout reads as intentional
- Do: Match gutter width to the mood — tight for dense dashboards, wide for editorial
- Do: Collapse columns at each breakpoint (12 → 6 → 4 → 1) so content reflows cleanly
- Don't: Break the grid before you've established it — a bleed only reads as intentional against order
- Don't: Reach for arbitrary widths when a clean column ratio like 4:8 or 6:6 already fits
