011 min
Why a team needs a grid system
Picture a team of three designers building a billing dashboard for a subscription app. Each designer works on a separate screen. One makes the main panel a little wider than the others do. Another leaves less space on the left side. The third centres the content and sets no fixed width. Every screen looks fine on its own. Side by side, nothing lines up, and the product feels careless even though no single choice was wrong.
The team can fix this by agreeing, for every screen, how wide things are and how far apart they sit. That agreement is a grid system. In graphic design, a grid is a structure of intersecting lines, usually horizontal and vertical, that decides where content goes. A designer arranges images, text and other elements against these lines so that the page is easy to take in.
Without a grid, each width is a new decision, and each decision is another chance for two screens to disagree. With one, a designer chooses from a short list of allowed widths and gaps, so alignment comes from the structure and not from judging by eye. Readers gain as well. Grids give every page the same reference points, and Nielsen Norman Group's Kelley Gordon wrote in 2022 that this makes pages easier to read and to scan.
022 min
Where grid systems come from
The dashboard team's problem is old. Before movable type, scribes placed handwritten text on a page using systems of fixed proportions. One of them, the Villard diagram, was in use from at least medieval times.
The modern grid is newer. After the Second World War, several graphic designers read Jan Tschichold's modernist book Die neue Typographie (The New Typography) and began to doubt that the page layouts of their day made sense. Josef Müller-Brockmann, Max Bill and Emil Ruder were among them. They worked out a flexible system that gave a page coherence. It became part of the International Typographic Style, also called Swiss Style.
Müller-Brockmann, a Swiss designer who lived from 1914 to 1996, then wrote the book that spread the method. Grid Systems in Graphic Design appeared in 1981 and spread the grid first across Europe and later into North America. By the mid-1970s, schools in Europe, North America and much of Latin America taught the typographic grid as a standard part of graphic design.
Page canons are reconstructions, not records
A popular story says early printers divided their pages with a secret geometric rule. The story comes from reconstructions. The canons of page construction were worked out by measuring surviving books and then finding which methods could have produced their margins. J. A. van de Graaf, for example, devised a construction that gives a page margins of one-ninth and two-ninths, to show how Gutenberg and others may have divided a page. Tschichold helped make these canons popular in the mid to late twentieth century.
They are a useful way to divide a page into pleasing proportions. They are not proof of what any printer did.
032 min
The parts of a grid system
The team now needs words for what it is agreeing on. Every grid system is built from the same few parts. Columns are vertical strips, and they hold the content. Gutters are the spaces between columns. Margins are the bands at the left and right edges of the screen, and content does not sit in them. Add horizontal rows, and each place where a row crosses a column becomes a module.
On screens, a column's width is usually written as a percentage so that the grid can change with the window. A gutter is a fixed value that may change at set screen widths.
How the widths of a grid add up
The widths of a grid follow plain arithmetic: columns plus gutters, and there is always one gutter fewer than there are columns. In 2009, the designer Ethan Marcotte described a page of seven columns, each 124 pixels wide, with 20-pixel gutters between them. The seven columns add up to 868 pixels and the six gutters add 120 more, so the page is 988 pixels wide. A title that spans five columns also spans four gutters, which is 620 plus 80, or 700 pixels. Any element that spans whole columns and the gutters between them fits the grid with no extra measuring.
How code builds a grid gutter
A web framework shows how a gutter is often made. In Bootstrap, a widely used grid for websites, a gutter is not a gap between boxes. Each column has horizontal padding of its own, and that padding is the gutter. The row around the columns then uses negative margins to cancel the padding at its outer edges, so the content in the columns lines up along the left side. Bootstrap's default gutter is 1.5rem, which is 24 pixels when the root font size is the usual 16 pixels.
042 min
Types of grid systems
The parts are the same everywhere, but grids differ in how they combine them. Designers name a handful of types.
| Type | How it divides the page | Where it fits |
|---|---|---|
| Manuscript | One large block of text | Books and long articles |
| Column | Vertical columns | Magazines, newspapers, flexible layouts |
| Modular | Columns crossed by rows | Listings, galleries, card layouts |
| Hierarchical | Unequal areas by importance | News fronts, pages with one clear lead |
| Baseline | Evenly spaced horizontal lines | Text-heavy pages |
| Square | Equal squares | Icons and small components |
Nielsen Norman Group's 2022 guide names three for interfaces. A column grid divides a page into vertical columns and aligns content to them. A modular grid adds rows, and the modules that result suit ecommerce and listing pages, because the rows can repeat as people browse. A hierarchical grid gives the most important content the largest areas, which turns visual hierarchy into structure.
The guide's example of a hierarchical grid is the New York Times website. At desktop size, two main columns hold the lead story in the larger, left column and the secondary stories in the smaller column and the modules on the right. Its example of a modular grid is Behance, a site where designers show their work. Its projects sit in modules, and the rows repeat.
For the dashboard, most screens are rows of repeating cards, so the team picks a modular grid.
051 min
Why grid systems use 12 columns
Once the team chooses a column grid, it must choose how many columns. On the web the usual answer is 12. Twelve divides evenly by two, three, four and six, so a row can be split into halves, thirds, quarters or sixths with nothing left over. Bootstrap builds its grid on this: every row has 12 template columns, and a class such as col-4 spans four of them. Smaller grids of 4 or 8 columns also exist and suit simpler pages.
| Layout | Column spans | Total |
|---|---|---|
| Two equal panels | 6 + 6 | 12 |
| Three equal cards | 4 + 4 + 4 | 12 |
| Four equal cards | 3 + 3 + 3 + 3 | 12 |
| Sidebar and main area | 3 + 9 | 12 |
The dashboard team uses the last row for its settings screen, with a navigation list on three columns and a form on nine, and the third row for its summary cards. Twelve is a convention, not a law. A team that never needs thirds could pick another number, but then it loses the easy splits.
062 min
How grid systems adapt to screen size
The twelve-column dashboard must also work on a phone, where twelve narrow strips would be unreadable. So the grid changes with the screen. Responsive design sets breakpoints, which are screen widths at which the layout changes. A desktop screen may use 12 columns, and a phone may use 4, with the cards stacked one above another. Style rules written for a given width, called media queries, switch the grid at each breakpoint. Some teams now also use container queries, which let a single component change according to the width of the box that holds it and not the width of the screen.
How a pixel grid becomes a fluid one
A grid can be fixed or fluid. A fixed grid uses widths in pixels and stays the same size. A fluid grid gives its widths as percentages, so it stretches with the window. Marcotte's 2009 method turns the first into the second with one division: the width of an element divided by the width of the space that contains it. Marcotte's title spanned five columns and the four gutters between them, 700 pixels in a page 988 pixels wide. Dividing 700 by 988 gives 0.7085, which is 70.85%. The title's offset of 144 pixels, one column plus one gutter, becomes 14.575% in the same way.
The title now keeps the same share of the page at every window width. Every part of the grid converts the same way, so the grid keeps its proportions as it resizes.
Where a fluid grid must stop shrinking: the 320 pixel rule
A fluid grid also has to work when a reader zooms in. Some people with low vision enlarge a page up to 400%. WCAG 2.2 success criterion 1.4.10, Reflow, asks that content work without scrolling in two directions at a width of 320 CSS pixels. A window 1280 pixels wide at 400% zoom shows exactly that width. A twelve-column layout that only shrinks its columns would leave text too narrow to read, so it has to collapse to a single full-width column. Parts that truly need two dimensions, such as maps, diagrams and data tables, are exempt.
CSS Grid is a tool, not a grid system
Developers also use the word grid for code. CSS Grid Layout is a W3C specification that defines a two-dimensional layout system, in which a developer places boxes into rows and columns. Flexbox, its neighbour, lays items out in one direction at a time. Neither sets the number of columns, the gutter size or the margins. A team that writes display: grid has a tool for building a grid system, not a grid system.
071 min
Baseline grids and the 8-point unit
Columns control sideways placement. Vertical placement needs its own rule. A baseline grid is a set of evenly spaced horizontal lines, often matching the line height of the body text, so that text and other elements align vertically. Many interface teams go further and measure every vertical gap in multiples of one base unit, commonly 8 pixels, as in the 8-point grid. The dashboard team sets line heights and card padding to multiples of 8, so every card height is a multiple of 8 pixels too.
Printers faced the same vertical problem long before screens existed.
A case: Gutenberg's 40-line and 42-line pages
The Gutenberg Bible, printed in Mainz in the 1450s, began with 40 lines on each page. After some sheets were done, the printers moved to 42 lines, probably to save paper. Pages 1 to 9 and 256 to 265 kept 40 lines, page 10 has 41, and 42 lines run from there on. Printers fitted the two extra lines in by narrowing the space between lines, and left the printed area the same size.
The change shows what a baseline does. With the type area fixed, the step between lines decides how many lines fit.
081 min
Setting up a grid system
With the types, column counts and breakpoints understood, the dashboard team can write its grid down.
- Start from the content. Cards, long forms and long text each call for a different type of grid, so the content decides the type.
- Pick a column count for each breakpoint, for example 12 on a desktop screen and 4 on a phone.
- Set the gutter and the margin once for each breakpoint, in one shared place such as a design tool's saved grid style or a design system, and reuse them.
- Choose one vertical unit, such as the 8 pixels above, and use only its multiples.
- Give the numbers to the developers. Gordon's guide stresses that the grid is not a throw-away drawing, because developers build the layout from it.
- Test on real phones and tablets, because an emulator does not show every case, such as a foldable screen or a very wide monitor.
The team now has one page of numbers, and every panel in the dashboard spans whole columns.
092 min
When grid systems stop helping
A grid can also be applied without thought. The risk is rigidity. Müller-Brockmann wrote: "The grid system is an aid, not a guarantee." A grid gives alignment and repetition, but it cannot decide what a page should say or which content comes first.
A grid broken without a reason
Nielsen Norman Group's 2022 guide breaks a design down to show the cost. In Google's Shrine design study, the left navigation is two columns wide, yet some product images sit in the margins and others do not. The guide says this makes the images harder to scan and draws more attention to some products than to others. It also says that breaking the grid now and then is fine, as long as there is a valid reason.
The backlash of the 1980s
By the mid-1970s the grid was a standard lesson, and its look had become a style for corporate communication. In the early 1980s, some designers rejected the grid because they saw it as dogmatic and tied to corporate culture. The Apple Macintosh then let designers set type themselves, and a wave of experiments followed, much of it against the rules of Tschichold and Müller-Brockmann. Today the grid is taught as a useful tool for some projects, not as a required starting point for every page.
How to spot a grid system going wrong
These signs can be checked on a screen with the grid overlay switched on:
- The left edge of the same kind of element differs by a few pixels from one screen to the next.
- Spacing values in the design file are not multiples of the base unit.
- Many one-off widths exist, with no column span behind them.
- Developers ask designers for exact pixel numbers on each screen, because the shared grid does not give them the answer.
101 min
Grid systems vs. nearby concepts
Grid systems are easiest to confuse with the 8-point grid. The 8-point grid fixes one thing, the unit for spacing and sizes. A grid system fixes the whole structure: columns, gutters, margins and, often, that unit as well. A team can use the unit without any columns, but then it does not have a grid system.
Other neighbours are easier to separate, because each names a different kind of thing.
| Concept | What it is | How a grid system relates |
|---|---|---|
| AIAlignment | ||
| Not in the library yetGolden ratio and rule of thirds | ||
| DesignVisual hierarchy | ||
| Not in the library yetCSS Grid |
Whitespace is the empty space around and between elements. Gutters and margins reserve some of it, but a grid system says nothing about how much empty space a page should have overall.
?4 questions
Questions people ask
Can a grid system have a grid inside another grid?
How wide should gutters and margins be?
Does a small project need a grid system?
Can an image run outside the columns?
§10 sources
Sources
Wikipedia contributors. Grid (graphic design). Wikipedia. (graphic_design)
Wikipedia contributors. Canons of page construction. Wikipedia.
Wikipedia contributors. Gutenberg Bible. Wikipedia.
Gordon, K. (2022). Using Grids in Interface Designs. Nielsen Norman Group.
Show all 10 sourcesShow fewer sources
Marcotte, E. (2009). Fluid Grids. A List Apart, issue 279.
Bootstrap. Grid system. Bootstrap 5.3 documentation.
W3C. CSS Grid Layout Module Level 1.
W3C. Understanding Success Criterion 1.4.10: Reflow. WCAG 2.2.
The Graphic Design School. Josef Müller-Brockmann, a profile that quotes Grid Systems in Graphic Design (1981).
UXPin. UI Grids: The Complete Guide to Grid Systems in Design.
