Grid System
An underlying structure of columns and rows that aligns a layout.
A grid system is an invisible framework of columns, rows, and gutters that brings order and alignment to a layout. It keeps spacing consistent, content aligned, and designs responsive across screen sizes.
Grids make layouts feel intentional and professional, and give designers and developers a shared structure to build against.
Key characteristics
- A framework of columns, gutters and margins that aligns content consistently.
- Common web grids use 12 columns because 12 divides cleanly into halves, thirds and quarters.
- Brings rhythm and order, and makes responsive layouts predictable.
- Includes column, modular and baseline grids for different needs.
Example
A 12-column grid lets a marketing page place a 8-column article beside a 4-column sidebar that gracefully stacks to full width on mobile.
Frequently asked questions
Why are 12-column grids so common?
12 is highly divisible — into 2, 3, 4 and 6 — so it supports many layout splits (halves, thirds, quarters) with whole numbers, making flexible responsive design easier.
What is the difference between a grid and a layout?
A grid is the underlying alignment framework; a layout is a specific arrangement of content placed onto that grid. One grid supports many layouts.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.