Grid System
The columns, gutters and margins a layout is built on — the structure deciding where things can go before anybody decides what goes there.
Deliverables & ArtifactsA grid constrains horizontal placement so that independently built screens line up. The familiar 12-column desktop grid persists because 12 divides cleanly into halves, thirds, quarters and sixths, which covers most layouts. Column count, gutter width, outer margin and maximum content width are the four numbers, and they should change at breakpoints rather than scaling continuously.
Grids constrain, they do not compose. A layout can be on-grid and still unreadable if the line length is wrong — roughly 45 to 75 characters is where sustained reading works, which usually means text does not span all twelve columns regardless of what the grid allows. CSS Grid has also made strict column alignment less necessary for component-level layout; the value now is mostly at page level, for consistent page margins and content width.
In practice
A marketing site let body copy run the full 1440px content width — around 140 characters per line. Constraining text blocks to eight of twelve columns, around 68 characters, raised average scroll depth on long articles by about 20% with no other change.
Where teams get it wrong
- Text spanning the full grid, producing line lengths nobody reads comfortably.
- One grid for every breakpoint, so mobile inherits desktop gutters.
- Treating the grid as a layout rather than a constraint on one.
- No maximum content width, so text stretches on ultrawide monitors.
- Aligning to the grid while ignoring the vertical rhythm the spacing scale sets.
Learn more
You may ask
Frequently Asked Questions
Why do design grids use 12 columns?
Because 12 divides evenly into 2, 3, 4 and 6, covering halves, thirds, quarters and sixths with whole columns. Grids of 8 or 16 are also used, but 12 handles the widest range of common layouts.
Are grid systems still needed with CSS Grid and flexbox?
Less so inside components, where modern layout handles composition directly. At page level a grid still earns its place: consistent outer margins, gutters and maximum content width across screens built by different people.
Related terms
All terms- Spacing ScaleThe fixed set of gaps, padding and margin values a product is allowed to use, usually built on a 4 or 8 pixel base.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
- Typography ScaleThe fixed set of text sizes a product is allowed to use, and the line heights and weights that travel with each one.
- UI DesignThe design of what a user sees and operates — layout, type, colour, iconography and the visual states of every control.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us