Column Grid

A column grid splits the canvas into vertical strips of equal width separated by fixed gutters with optional outer margins that frame the entire system. Content blocks images and interface elements span one or more columns to create order that feels inevitable instead of decorative. Müller-Brockmann gave the system its grammar in 1961 and the logic traveled straight from Swiss posters to Stripe dashboards without losing a step. Twelve columns became the default because twelve divides cleanly into one two three four six or twelve spans without forcing fractional math on any team. CSS Grid finally handed browsers the same precision print designers had sixty years earlier so display grid with repeat twelve 1fr and a twenty four pixel gap now builds in three lines what used to require an entire framework. The column grid removes a thousand tiny placement arguments and hands the user a page that can be read in one glance instead of decoded over thirty seconds.

It is not a modular grid that carves both axes into a full matrix of cells like graph paper. It is not a baseline grid that locks every line of type to an invisible horizontal beat for vertical cadence. It is not a hierarchical grid that throws out regular columns the moment editorial priority demands a custom proportion. It is not a manuscript grid that reduces the entire page to a single perfect reading column. Most of all it is not optional decoration slapped on after the layout is already solved or a set of lines you are free to ignore the moment a stakeholder wants one more button jammed in the corner. A column grid is the first decision not the last. Treat it as an afterthought and every responsive breakpoint becomes a new argument instead of a predictable collapse.

Stripe runs the clearest column grid in production. Their 2026 marketing surface uses twelve columns with twenty four pixel gutters across every page. Navigation claims all twelve. The hero headline and CTA lock into the first seven while video assets take the final five. Feature rows drop into four plus four plus four. Pricing matrices use six plus six comparisons that reflow to four columns on tablet and full twelve on mobile. Inside the Stripe dashboard the identical logic holds. Sidebar navigation takes two columns metrics dashboards use nine and metadata rails claim the final one. Every integration card every billing table every settings panel snaps to the same boundaries so moving between marketing and product never feels like switching design languages. Linear applies the same system tighter. Their app shell collapses from twelve columns on desktop to four on mobile with the project rail fixed at three columns the issue list at six and the detail view at three. Their marketing site mirrors the product grid so the brand reads as one continuous surface. Vercel adds deliberate negative space inside the twelve column frame creating premium breathing room on deploy logs and pricing pages while still locking every control to the grid. Apple layers column logic underneath its hierarchical product launches so copy always lives inside an eight column track even when hero images break margins on purpose. The New York Times uses column grids for article templates while Figma applies them to the file browser chrome and Shopify Polaris Carbon and Material Design all standardized on twelve columns for the same mathematical reason Bootstrap proved in 2011.

The field guide most teams eventually adopt looks like this. Twelve columns for full bleed heroes banners and footers. Eight plus four for the classic app shell with main content and sidebar. Six plus six for feature comparisons or split copy blocks. Four plus four plus four for pricing tiers or feature cards. Three plus three plus three plus three for logo walls team grids or image galleries. Nine plus three for editorial layouts that need a main story plus slim metadata. Two plus eight plus two for centered marketing detail pages that need breathing room on the sides. Lock these spans once and layout arguments vanish from every design review.

Use a column grid on marketing pages app shells content sites newsrooms and any interface where predictability lets users scan first and read second. It shines when multiple designers and developers contribute because the grid becomes the shared language instead of endless Slack threads about placement. Combine it with an eight pixel baseline unit and the entire page starts to hum. Stripe Linear Vercel and Apple all hold column grids across years so the brand emerges from structure instead of surface color. Skip the column grid when the problem is truly two dimensional. Dense dashboards packed with cards of varying heights and synchronized rows need modular grids instead. Long form essays and documentation need manuscript grids optimized for sixty five to seventy five character measure. Radical editorial hierarchies sometimes demand hierarchical grids that size sections by reading priority rather than column math. Never adopt the grid and then ignore it on mobile or treat it as a suggestion that can be violated on every other element. One deliberate break against a strong visible grid lands like a headline. Constant violations just read as sloppy.

The column grid turns a thousand micro decisions into one macro decision so the designer can focus on what actually matters and the user can understand the page at a glance.