Published layout grids
67 grids · 16 completeEvery layout grid a publisher wrote down, and the ones that only look like they have one.
The finding. Sixteen of sixty-seven publish a grid you could rebuild from — columns, gutter, margin and a breakpoint. Eighteen publish no single grid at all, and ten of those eighteen publish a spacing scale instead: the rhythm written down, the structure not. Thirty-nine name no breakpoint. Twelve columns is the answer most of those that state a count give, and three rows in the whole register say why their numbers are their numbers.
Why Bootstrap sits beside a government manual
The rule for inclusion is narrow: a row exists only where the publisher documents its own grid. Not where a grid can be inferred from a stylesheet, and not where one is visible on the page — where the publisher wrote it down, in public, as a thing other people are meant to follow.
That rule is what puts a commercial CSS framework next to a national design system and a 1962 typographic standard. They are not comparable products and the collection does not claim they are. What is comparable is the act of publishing a grid — and the question this collection asks is what a publisher chooses to write down when they do: how many columns, how wide the gutter, whether the margin is stated, whether there is a baseline, whether anyone said why. On that question a framework and a ministry are answering the same thing, and they answer it differently.
Use Who published it below to read one kind at a time. 19 of the 67 rows come from design systems, the largest single group; the historical print standards are the smallest and the most completely documented.
An empty frame is not an empty page
None of the 18 blank rows is a claim that the publisher has no grid. Every one of them renders a laid-out page, so a grid is plainly in use. What is absent is a single grid written down as the one to follow — and for an organisation of any size the likeliest reason is that there is more than one. A marketing site, an application and a documentation site are three different layout problems, solved by three different teams, and none of the three is canonical. A grid that cannot be stated once is a finding about how design systems grow, not a gap in this table and not a failure to look.
The blank rows are also not one group. 10 of the 18 publish a spacing scale and no grid — the rhythm written down and the structure not. The other 8 publish neither. Filter by Spacing scale below to read the two apart.
Each of the 18 carries the URL that was examined and the date it was checked. At the last pass 13 still resolved to what they cited, 0 had moved, 3 could not be reached, and 0 returned 404. Where a citation has gone stale the absence is ours, not the publisher's — those rows are queued for re-checking rather than counted as evidence.
The column everyone fills in, and the one they do not
40 of the 67 publish no spacing scale at all — no base unit and no step stated for anyone else to work from. 27 document one. Of the 25 that name a base value, 17 use 8; the rest are 4px (6), 12pt (1), 16px (1). Only 11 name a baseline grid.
31 publish a column count while publishing no spacing scale. That is the same shape as this collection's other finding: the part of a layout that is easy to state — how many columns — gets written down, and the part that governs every margin, gap and rhythm on the page is left to be decided again on each screen.
The units are a record of when each was written. Josef Müller-Brockmann at 4mm · Adobe at 12pt · Robert Bringhurst at 14pt — set before the pixel, and still a scale.
Nine grids that say what happens at a breakpoint
Of 67 grids in this register, 28 record a breakpoint at all and 19 of those record only one — which is a container width, not a response to anything. 9 document how the grid behaves across sizes.
5 change the column count 4 keep the same columns and change only the width
| Grid | What it does across its breakpoints | Columns |
|---|---|---|
| Material Design 3Google | 0px 4 600px 8 840px 12 | 4 → 8 → 12 |
| Carbon Design SystemIBM | 320px 4 672px 8 1056px 16 | 4 → 8 → 16 |
| USWDSU.S. Web Design System | 320px 4 1024px 12 | 4 → 12 |
| GELBBC | 400px 4 1280px 8 | 4 → 8 |
| PolarisShopify | 490px 6 768px 12 | 6 → 12 |
| Bootstrap 5Bootstrap | 0px 12 576px 12 768px 12 992px 12 1200px 12 | 12 throughout |
| DSFRFrench Government | 576px 12 992px 12 | 12 throughout |
| Foundation 6Zurb | 0px 12 640px 12 | 12 throughout |
| TailwindTailwind Labs | 640px 12 768px 12 | 12 throughout |
What the two halves of the table are. The systems in the top group change what the grid is as the screen changes — Material goes 4 → 8 → 12, Carbon 4 → 8 → 16. The ones below keep twelve columns at every size and change only how wide the container is; Bootstrap does that across five breakpoints. Both are defensible and they are not the same decision, which is the point: a breakpoint is a place where you said the layout should become something else, and most published grids never say that.
Nine is a small number and it is the honest one. It is not that only nine systems are responsive — nearly all of them are. It is that only nine write down what changes, which is the same finding this collection makes about grids generally, one level down.
Eleven gaps, counted
One card, laid out twice. Nothing moves but the vertical space between the parts — same widths, same type, same order. Press the switch and every gap is rounded to the nearest step of an 8 px scale.
The gaps are the only variable. No element changes size, colour or order — the switch rounds each space to the nearest multiple of eight and nothing else. What changes is how many different distances the eye has to account for, which is the whole of what a spacing scale buys.
Every grid below is drawn to its own numbers. Column structure is true to the stated ratio rather than to scale, so a 546mm newspaper page and a 960px web grid can be compared on the thing worth comparing. A publisher who documented no grid gets an empty frame — the frame is the page, and what is missing inside it is the finding.
| Publisher | The grid | Cols | Gutter | Margin | Max | Scale |
|---|---|---|---|---|---|---|
| 960 Grid System framework 960.gs — 12/16 col (historical) · historical | default 960px · 12c | 12 | 20px | 10px | 960px | — |
| Ant Group design system Ant Design — Grid | xs 0px · 24c | 24 | 8px | 16px | — | 8px |
| Asahi Shimbun newspaper Asahi Shimbun vertical grid | | 15 | 8mm | 12mm | 546mm | — |
| Bootstrap framework Bootstrap 5 — Grid system | xs 0px · 12csm 576px · 12cmd 768px · 12clg 992px · 12cxl 1200px · 12c | 12 | 24px | 12px | 1320px | yes |
| Bootstrap framework Bootstrap 3 — Grid (superseded) · historical | xs 0px · 12c | 12 | 30px | 15px | 1170px | — |
| French Government government DSFR — Grid | sm 576px · 12clg 992px · 12c | 12 | 16px | 16px | 1280px | 8px |
| Google design system Material Design 3 — Layout | compact 0px · 4cmedium 600px · 8cexpanded 840px · 12c | 4 | 16px | 16px | 840px | 8px |
| IBM design system Carbon Design System — 2x Grid | sm 320px · 4cmd 672px · 8clg 1056px · 16c | 16 | 16px | 16px | 1584px | 8px |
| IBM brand manual IBM Brand — Grid (print manual 1973) · historical | | 8 | 10mm | 18mm | 210mm | — |
| ISO typographic standard ISO 216 — A-series paper sizes and grid · historical | | 4 | 5mm | 10mm | 210mm | — |
| Josef Müller-Brockmann typographic standard Grid Systems in Graphic Design (1961) · historical | | 8 | 3mm | 10mm | 120mm | — |
| Lufthansa brand manual Lufthansa Manual (Otl Aicher 1963) · historical | | 12 | 10mm | 20mm | 210mm | — |
| NASA government NASA Graphics Standards Manual 1976 · historical | | 10 | 6mm | 12mm | — | — |
| The Guardian newspaper Berliner format — Guardian redesign 2005 · historical | | 5 | 4mm | 12mm | 470mm | — |
| U.S. Web Design System government USWDS — Grid | mobile 320px · 4cdesktop 1024px · 12c | 12 | 16px | 16px | 1024px | 8px |
| Zurb framework Foundation 6 — XY Grid | small 0px · 12cmedium 640px · 12c | 12 | 20px | 15px | 1200px | yes |
| Adobe design system Spectrum — Layout | default 0px · 12c | 12 | 16px | 16px | — | 4px |
| Adobe framework InDesign — Default grid | | 6 | 12pt | 12pt | — | 12pt |
| Apple brand manual Apple Human Interface Guidelines — Layout | default 0px · 12c | 12 | 16px | 16px | — | — |
| Atlassian design system Atlassian Design — Grid | default 0px · 12c | 12 | 8px | 24px | — | 8px |
| BBC broadcaster GEL — Grid | GEL small 400px · 4cGEL large 1280px · 8c | 8 | 16px | 16px | — | 8px |
| Bulma framework Bulma — Columns (12-col) | default 0px · 12c | 12 | 12px | 12px | — | — |
| Canada Gov government Canada.ca — Grid | default 0px · 12c | 12 | 16px | 16px | — | — |
| China GB typographic standard GB/T 9704 — Chinese document grid | | 4 | 8mm | — | — | — |
| DIN 1451 typographic standard DIN 1451 — Road signage grid · historical | no column count stated | — | — | — | — | — |
| GitHub design system Primer — Layout | default 0px · 12c | 12 | 16px | 16px | 1280px | 16px |
| Google brand manual Material You — Grid update | default 0px · 12c | 12 | 16px | 16px | — | — |
| Google design system Material Design 1 — Grid (superseded) · historical | default 0px · 12c | 12 | 16px | 16px | — | 8px |
| GOV.UK government GOV.UK Frontend — Layout | default 0px · 12c | 12 | 15px | 15px | 1280px | — |
| Jan Tschichold typographic standard Die Neue Typographie (1928) · historical | | 12 | 4mm | 12mm | — | — |
| JIS typographic standard JIS P 0138 — Japanese book grid · historical | | 9 | 6mm | 12mm | — | — |
| Korean Gov typographic standard Hangeul — Horizontal grid KS X 1001 | | 10 | 8mm | — | — | — |
| Le Monde newspaper Le Monde format | | 6 | 10pt | — | — | — |
| Microsoft design system Fluent — Layout | default 0px · 12c | 12 | 16px | 16px | — | 4px |
| NHS government NHS — Grid | default 0px · 12c | 12 | 16px | 16px | — | 8px |
| Nikkei newspaper Nikkei vertical setting grid | | 12 | 10mm | — | — | — |
| Robert Bringhurst typographic standard The Elements of Typographic Style (1992) · historical | | 6 | 12pt | 18pt | 30pica | — |
| Salesforce design system Lightning — Grid | default 0px · 12c | 12 | 12px | 12px | — | 4px |
| Semantic UI framework Semantic UI — Grid (16-col) · historical | default 0px · 16c | 16 | 14px | 14px | — | — |
| Shopify design system Polaris — Layout | sm 490px · 6cmd 768px · 12c | 12 | 16px | 16px | 1248px | 4px |
| Stanley Morison / The Times newspaper Times New Roman grid (Times 1932) · historical | | 8 | 12pt | 18pt | 42pica | — |
| Swissair brand manual Swissair Manual (Karl Gerstner) · historical | | 12 | 8mm | 16mm | — | — |
| Tailwind Labs framework Tailwind — Container and Grid | sm 640px · 12cmd 768px · 12c | 12 | — | — | — | — |
| The New York Times newspaper NYT broadsheet grid | | 6 | 12pt | — | — | — |
| UK Government government UK Government — Print grid 2012 · historical | | 12 | 12pt | — | — | — |
| United Nations government UN — Grid for publications · historical | | 6 | 12pt | — | — | — |
| Unsemantic framework Unsemantic — Grid · historical | default 0px · 12c | 12 | 20px | 10px | — | — |
| Vuetify framework Vuetify — Grid (12-col) | default 0px · 12c | 12 | 12px | 12px | — | — |
| Webflow framework Webflow — Grid (12-col default stated) | default 0px · 12c | 12 | 20px | 30px | — | — |
| Airbnb design system cited home gone Airbnb — Components | no grid documented | — | — | — | — | — |
| Australia Gov government cited home gone Australian Gov — Grid not stated | no grid documented | — | — | — | — | 8px |
| Chakra UI framework Chakra UI — Grid not stated (SimpleGrid) | no grid documented | — | — | — | — | 4px |
| Dropbox design system Dropbox Design — Components | no grid documented | — | — | — | — | 8px |
| Figma framework Figma Auto Layout — Not a documented grid | no grid documented | — | — | — | — | 8px |
| Harvard university Harvard — Digital grid (undocumented) | no grid documented | — | — | — | — | — |
| IKEA brand manual IKEA — Layout grid (undocumented) | no grid documented | — | — | — | — | 8px |
| Japan Gov government Japan Gov — Screen grid not stated | no grid documented | — | — | — | — | — |
| Linear design system Linear — Interface (no published grid) | no grid documented | — | — | — | — | 8px |
| Medium design system Medium — Components | no grid documented | — | — | — | — | — |
| MIT Media Lab university MIT Media Lab — Web grid not stated | no grid documented | — | — | — | — | 8px |
| Nintendo brand manual Nintendo — Web grid not stated | no grid documented | — | — | — | — | — |
| Notion design system Notion — Design components (no grid page) | no grid documented | — | — | — | — | — |
| OddBird framework Susy — Grid math (no fixed columns) · historical | no grid documented | — | — | — | — | — |
| Slack design system Slack Kit — Layout not stated | no grid documented | — | — | — | — | — |
| Spotify design system Encore — Layout (sparse) | no grid documented | — | — | — | — | 4px |
| Stripe design system Stripe Dashboard — Components | no grid documented | — | — | — | — | 8px |
| Uber design system Base — Grid (undocumented) | no grid documented | — | — | — | — | 8px |
39 of 67 name no breakpoint at all. 27 document a spacing scale — more than the 16 that document a complete grid, and what that scale is made of is above. 3 say why their numbers are their numbers.
Source. design systems, brand manuals, typographic standards and framework defaults · public documentation · print manuals cited · retrieved 2026-08-26. This collection is derived · documents only.