layout

12-column grid

A layout convention dividing content width into 12 equal columns with gutters, so elements can span flexible fractions – halves, thirds, quarters – of one grid.

The invisible scaffolding most designers still reach for first, inherited from print and popularised on the web by Bootstrap. Twelve is chosen because it divides evenly by 2, 3, 4 and 6 – one grid yields many layout combinations.

Worth knowing the 2026 caveat: native CSS Grid means you’re no longer forced to think in fixed columns, and container queries have shifted how responsive layout is actually built. The 12-column model survives as a shared mental model between designers and engineers more than as a technical constraint.