UX Glossary · G
Grid system
Also: Layout grid
A framework of columns and spacing that gives layout consistent alignment and rhythm.
A grid divides the layout into columns with consistent gutters, so elements align to shared positions rather than being placed by eye. Twelve columns is the common web default because twelve divides cleanly into halves, thirds, quarters and sixths.
Grids came to screen design from Swiss typography, where Josef Müller-Brockmann’s Grid Systems in Graphic Design (1981) codified a practice already decades old in print.
Why it works
Alignment is a grouping cue, as the Gestalt principles predict. Elements sharing an edge read as related, and inconsistent alignment reads as noise even when the reader cannot say why.
The practical benefit is decision cost. With a grid, “where does this go” has a small set of valid answers, which makes layouts faster to produce and much easier for several people to produce consistently.
Beyond columns
A spacing scale matters as much as columns. A 4 or 8 pixel base, with steps built from it, prevents the accumulation of arbitrary values like 13, 17 and 22 pixels that makes an interface feel unresolved.
CSS Grid made real two-dimensional layout native, so grids no longer need to be faked with
floats or nested containers, and auto-fit with minmax() handles many responsive cases
without explicit breakpoints.
In practice
The grid is a default, not a cage. Breaking it deliberately for a full-bleed image is fine. Breaking it accidentally, repeatedly, is what makes a page feel untidy without an obvious cause.