A column grid is a layout structure that divides a page or screen into a set number of vertical columns separated by gutters and bounded by margins, so that content can be placed on consistent widths and alignment lines. In layout and grid design it is the most widely used grid type, found in newspapers, books, websites and app interfaces alike.
Elements in a column grid span one or more columns, which lets designers create varied compositions while keeping every edge aligned to the same system. The result is visual order, predictable rhythm and faster decisions, because widths are chosen from a small set of options rather than invented for each element.
Anatomy of a column grid
Every column grid is defined by a few parameters. Together they determine the width of each column and therefore every width that content can occupy. Changing one parameter, such as the gutter, changes all derived widths.
| Parameter | Definition | Typical values |
|---|---|---|
| Columns | Vertical divisions that content spans | 4 on phones, 8 on tablets, 12 on desktop |
| Gutter | Space between adjacent columns | 16 to 32 px on screen, 4 to 6 mm in print |
| Margin | Space between the outer columns and the edge | 16 to 24 px on phones, wider on desktop |
| Container width | Maximum width of the grid area | About 1140 to 1440 px on desktop |
| Column width | Result of the other parameters | Fixed or fluid, derived by calculation |
Column width follows a simple relation: container width minus all gutters, divided by the number of columns. A 1200 px container with 12 columns and 24 px gutters leaves 1200 minus 11 times 24, or 936 px, which gives 78 px per column. A block spanning three columns is then three columns plus two gutters, or 282 px.
Why twelve columns are so common
The 12-column grid dominates web design because 12 has many divisors. It splits evenly into halves, thirds, quarters and sixths, so the same grid supports two, three, four or six equal content blocks without fractional widths.
| Column count | Even divisions | Typical use |
|---|---|---|
| 2 columns | Halves | Simple editorial pages, text with sidebar |
| 4 columns | Halves, quarters | Phone layouts |
| 5 columns | None besides fifths | Asymmetric editorial layouts |
| 6 columns | Halves, thirds, sixths | Print magazines, compact web pages |
| 12 columns | Halves, thirds, quarters, sixths | Desktop web and product interfaces |
| 16 or 24 columns | Many fine divisions | Dense dashboards and data tools |
More columns mean more flexibility but weaker structure. With 24 columns almost any width is possible, so the grid stops guiding decisions. Print designers often prefer odd counts such as five or seven to encourage asymmetric, less static compositions.
Column grid compared with other grid types
The column grid controls horizontal structure only. Other grid types add vertical control or address different content, and many real layouts combine several of them within one grid system.
| Grid type | Divides space | Best suited for |
|---|---|---|
| Manuscript grid | One large text block | Books, long continuous reading |
| Column grid | Vertical columns with gutters | Editorial pages, websites, apps |
| Modular grid | Columns and rows into modules | Catalogs, galleries, complex print |
| Baseline grid | Horizontal lines for text baselines | Vertical rhythm of typography |
| Hierarchical grid | Irregular zones by content priority | Landing pages, unique layouts |
A modular grid is essentially a column grid with added row divisions, while a baseline grid is usually layered on top of a column grid to align text vertically. A responsive grid changes the column count and gutters at breakpoints so the same structure adapts to screen width.
Column grids in responsive interfaces
On the web, column grids are usually fluid: columns stretch with the viewport while gutters stay fixed, up to a maximum container width. At defined breakpoints the column count drops, commonly from 12 to 8 to 4, and elements change their span rather than shrinking indefinitely.
In CSS, a column grid maps directly onto CSS grid, for example grid-template-columns: repeat(12, 1fr) with a gap for the gutter. An element then declares its span, such as grid-column: span 4. Flexbox can approximate columns but handles two-dimensional alignment less directly.
Text measure deserves attention: a paragraph spanning all 12 desktop columns becomes far too wide to read. Body text is easier to read at about 50 to 75 characters per line, so long text typically spans six to eight columns, not the full grid.
Common column grid mistakes
A column grid helps only when it is applied consistently and broken deliberately. These mistakes undermine its value.
- Aligning to gutters: content edges that start in a gutter instead of on a column edge destroy the alignment lines.
- Inconsistent gutters: mixing gutter sizes across pages makes the system feel slightly off everywhere.
- Grid too fine: a 24-column grid used for a simple site gives no real guidance.
- Ignoring margins on phones: margins below about 16 px make text touch the screen edge.
- Random breaks: breaking the grid works only when it is intentional and rare, such as a full-bleed image.
In simple terms
A column grid is a set of invisible vertical stripes that designers use to line things up. Picture a page divided into equal lanes, like a swimming pool. Each picture or block of text covers one lane or several lanes, but always fits the lanes exactly.
Because everything follows the same lanes, the page looks tidy and balanced. Readers rarely notice the grid itself. They simply find the page calm and easy to scan.
A practical example
A city museum redesigns its website, which has grown into pages of mismatched widths. The designer sets up a 12-column grid with a 1200 px maximum container, 24 px gutters and 32 px margins on desktop, switching to 8 columns on tablets and 4 columns with 16 px margins on phones.
Exhibition cards span four columns on desktop, giving three per row, then span four of eight columns on tablets for two per row, and the full width on phones. Article text spans the middle eight columns on desktop so lines stay readable, while hero images deliberately break out to full width.
Developers implement the grid once in CSS. New pages now take hours instead of days to lay out, and the site finally looks consistent from page to page.