Grid system
Shared columns, rows, and gutters that every element snaps to, so a page looks aligned instead of eyeballed.
See it
What it is
A grid system is a shared skeleton of columns, gutters, and margins that every element on the page snaps to. Josef Muller-Brockmann wrote the book on it (literally: 'Grid Systems in Graphic Design'), and Swiss poster design proved the point: consistent alignment reads as deliberate even when nobody can name why.
The web mostly settled on 12 columns, because 12 divides cleanly into halves, thirds, quarters, and sixths, so the same grid handles a 3-up card row and a 2-up split without new math. Pick a column count, a gutter, and a max content width once, then express it in CSS Grid and stop making per-section spacing decisions.
Gotcha: the grid is scaffolding, not a cage. The moments people remember (a full-bleed image, a card overlapping two columns, an off-grid pull quote) come from breaking it on purpose, which only reads as intentional if the rest of the page is disciplined. And a grid that only governs horizontal position is half a system: apply the same spacing scale vertically or the page will still feel loose.
Ask AI for it
Lay this page out on a 12-column CSS Grid: 1280px max content width, 24px gutters, 24px outer page margins, centered. Snap every section to column spans (full 12, two 6s, three 4s, sidebar 3 plus content 9) and never use arbitrary pixel offsets. Drop to 8 columns at tablet and 4 at mobile with 16px gutters. Use the same 8px spacing scale for vertical rhythm, and add a toggleable grid overlay so the columns can be checked visually.