i
Exhibit · a working bench about a pattern
PTN·03·009

One website, every grid

Twelve divides documented
Grid
Screen width

The page is as wide as the screen up to the grid's maximum width, with the margins inside it. Where a publisher gives a column count per breakpoint, the count changes with the width; gutters and margins are the published ones throughout. The Hillside Journal is invented.

Every grid at this width

The same page on all of them at once. Click a row to see it above. Empty columns are the ones a row of story cards, pictures or footer links leaves unused.

A grid is only as good as the numbers it divides into. This room takes one plain website and lays it out on twenty-seven grids that real organisations publish — each on its own columns, gutter, margin and maximum width — at four screen widths, without adjusting the page for any of them.

Most rows come out the same, because most of these grids have twelve columns, and twelve divides by two, three, four and six. The ones that do not are the lesson: on sixteen columns a row of three story cards takes five columns each and leaves one empty, and a row of six pictures runs five to a row. Nothing is broken. The grid is simply telling you what kind of content it was made for.

AnatomyOne plain website — a header, a lead story, a row of three story cards, an article with a sidebar, a row of six pictures and a footer — laid out on any screen grid in the register of published grids that gives columns, a gutter and a margin in pixels, with its maximum width and its column count at each breakpoint where it states them. Each part asks for a share of the row and the narrowest width it can bear; the grid decides how many columns that becomes. A readout gives the arithmetic, and a table shows the same page on every grid at once.

Twelve columns is the right default when

  • The page repeats things in twos, threes, fours and sixes — cards, pictures, footer links — and twelve divides by every one of them
  • Several people will build pages on the grid, and nobody can predict what each page will hold
  • You want the narrowest unit to be wide enough to hold a word, at the screen widths your readers actually use

Another count is the better choice when

  • The content has one fixed rhythm: a dashboard in quarters and eighths sits naturally on sixteen, and sixteen will not take a row of three
  • The page is mostly one column of reading, and a manuscript grid with honest margins serves it better than twelve columns nobody uses
  • A design system needs finer steps than twelfths and has the discipline to use them — twenty-four is twelve, halved
States & accessEvery control is a real button, select or checkbox, and the table rows can be reached and chosen from the keyboard. The column overlay is drawn for sighted readers and is hidden from screen readers; the readout says the same thing in words. The mock site's pictures are placeholder frames, decorative, with nothing to read.
SpecimensTwenty-seven screen grids from the register of published layout grids — Bootstrap, GOV.UK, Material, IBM Carbon, the U.S. Web Design System, the 960 grid and more — each on its publisher's own numbers. The Hillside Journal is invented.
Principle at stakeVisual hierarchy depends on parts lining up, and parts can only line up on columns that divide the way the content does.
SourcesEvery grid's numbers come from its publisher's documentation, cited row by row in the register · Müller-Brockmann, J. (1981) Grid Systems in Graphic Design. Niederteufen: Niggli · Vinh, K. (2010) Ordering Disorder: Grid Principles for Web Design. Berkeley: New Riders.
See alsoOne menu, four grids — the four kinds of grid on a printed sheet · Published layout grids, the register this room is built on.

Why documented: Each grid's columns, gutter, margin, maximum width and breakpoints are its publisher's own, from documentation cited in the register. What the page does with them is arithmetic, shown on the page.