Twelve Column Grid

The twelve column grid splits your layout canvas into twelve equal vertical columns separated by consistent gutters and optional outer margins. Content blocks then span one or more columns to create layouts that feel inevitable instead of improvised. Twelve won the internet because it is the smallest number that divides cleanly by one two three four six and twelve. That math covers every pattern a product team ever needs. Bootstrap locked it in during 2011 and every design system since has copied the choice. Tailwind ships twelve columns as the default. Material Design Polaris and Carbon all use it. The system traces its logic straight back to the Swiss school even if Muller Brockmann never drew exactly twelve columns on his Tonhalle posters. The same constraint engine that gave print its quiet authority now runs Stripe Linear Vercel and the New York Times. CSS Grid makes it trivial to implement with display grid grid template columns repeat twelve one fr and gap twenty four pixels yet most teams still treat it like a framework plugin instead of a layout primitive. The grid sets the rhythm so the designer can stop measuring and start deciding what actually matters.

A twelve column grid is not a full design system. It does not dictate your type scale your baseline rhythm or your color palette. It is not a modular grid that adds horizontal rows into fixed cells for dashboard density. It is not a hierarchical grid that sizes every element according to editorial priority. It is not the manuscript grid that long form writing demands. Most of all it is not decoration. Slapping column lines onto a Figma file does not mean you have one. If your spans change every sprint and your gutters float between twenty and thirty two pixels you have a twelve column cosplay not a grid. It is also not CSS Grid the browser feature although the two work perfectly together. CSS Grid is the tool. Twelve columns is the decision.

Stripe runs a twelve column grid across its entire marketing surface and has done so for years. The homepage hero takes all twelve columns while the feature rows drop into six plus six or four plus four plus four. Their pricing table uses a clean three plus three plus three plus three on desktop before collapsing to stacked four column blocks on mobile. Linear deploys the identical system on its marketing pages then snaps the product shell into an eight plus four sidebar plus content split that maps directly onto the same twelve column logic. Vercel gives the grid breathing room so the deploy log and pricing matrix never feel cramped. Shopify Polaris uses twelve columns in its admin interface with strict span documentation that stops teams from inventing new layouts every quarter. Apple hides twelve column logic under its hierarchical product pages yet the underlying rhythm remains visible if you inspect the negative space. Figma applies it in the file browser and team library views. The New York Times features section collapses twelve column marketing blocks into four column mobile stacks without ever breaking the brand rhythm. These teams did not pick twelve because it sounded nice. They picked it because the division math removes debate.

Use the twelve column grid for marketing sites application shells dashboards and any surface where predictable responsive behavior matters more than editorial surprise. Lock the spans early. Document the eight plus four for app layout the six plus six for feature comparisons the four plus four plus four for pricing cards and the three plus three plus three plus three for logo walls. Once those patterns live in the design system design critiques shift from arguing about column widths to arguing about content priority. Apply it at every breakpoint by dropping from twelve columns on desktop to eight on tablet to four on mobile so the same composition reflows without redrawing. The system shines in products like Linear where the issue list the project view and the marketing site all feel cut from the same cloth. Never use it for long form essays where a single generous manuscript column with sixty five to seventy five character measure beats any multi column setup. Skip it when you need true modular density in both axes like a Bloomberg Terminal or NYT homepage. Do not reach for it on dense editorial covers that demand hierarchical sizing decided by reader priority instead of math. If your content is one hero image and a headline a twelve column grid adds ceremony with no payoff. Break it once per page only after the underlying structure is obvious enough that the violation lands like a deliberate scream instead of a mistake.

The twelve column grid is the silent contract that makes Stripe feel like Stripe and Linear feel like Linear even with the colors turned off.