Grid Layout Design Explained: Columns, Gutters, Modules and Examples
Grid layout design is the practice of dividing a page or screen into columns, rows and margins so that every element has a place to land. This guide explains the parts of a grid, how many columns suit which job, and how famous examples in print and on the web use them, from Gutenberg's Bible to CSS Grid.
What grid layout design actually does
A grid is a set of invisible lines deciding where things sit. Grid layout design uses those lines to give a page consistent margins, columns of equal width and shared alignments, so that a headline, a photo and a caption relate to one another even when they sit far apart. Readers never see the grid. They feel its absence.
The benefit is partly speed. Once a grid exists, dozens of pages can be laid out without reinventing each one, which is why magazines, newspapers and websites adopt one before any content arrives. The other benefit is trust. Consistent edges suggest that someone took care, and that impression transfers, fairly or not, to the information itself.
Columns, gutters, margins and modules
Columns are the vertical divisions where text and images live. Gutters are the gaps between columns, and margins are the space around the whole live area. Add horizontal rows and the grid becomes modular, with each rectangle called a module. A picture might take two modules across and three down, while a caption takes exactly one.
Baseline grids add another layer. Every line of body text sits on a repeating horizontal interval, so text in neighbouring columns lines up across the gutter. The effect is subtle on screen but obvious in print, where misaligned lines show through thin paper. Few beginners bother with a baseline grid, and the difference shows in long documents.
How many columns should a grid have?
The right number of columns depends on what the layout holds. A novel needs one wide column. A magazine feature often uses three or four, which leaves room for a photo spanning two and a narrow sidebar. Newspapers traditionally used six or more because their pages carried many separate stories of different lengths at once.
On the web, twelve columns became the habit, largely because the number divides evenly into two, three, four and six. Bootstrap, the front-end framework released by developers at Twitter in 2011, spread the twelve-column system to millions of sites. A designer rarely uses all twelve individually; they are a fine ruler for combining into wider blocks.
More columns are not automatically better. Each extra division narrows the options for text, and a single paragraph stretched across a narrow column breaks into ragged, hyphen-heavy lines. A sensible check is to ask how wide one line of body text will be and work backwards, since roughly 45 to 75 characters per line reads comfortably.
Grid layout design examples from print
Some of the oldest examples are also the most refined. Gutenberg’s Bible, printed in Mainz in the 1450s, set its text in two dense columns with generous margins, proportioned so the page looked balanced when the book lay open. Medieval scribes had worked out similar proportions by hand, using geometric constructions instead of measurements.
The modern grid came from Switzerland. Designers there in the 1950s built posters and books on strict modular systems, and Josef Muller-Brockmann codified the method in Grid Systems in Graphic Design, published in 1981. The book is still in print. Its examples show how much variety a rigid structure allows, which surprises readers who expect grids to feel mechanical.
Another classic example is the Unigrid created by Massimo Vignelli for the United States National Park Service in 1977. A single folding format, black title band and modular grid let staff across hundreds of parks produce brochures that clearly belonged together. Pick up a park map today and the structure is still recognizable, decades after the original design.
Grid layout design on screens
Early websites faked grids with HTML tables, then with floats and frameworks. That changed in 2017, when CSS Grid Layout reached the major browsers and designers could finally describe rows and columns directly in the stylesheet. The W3C specification lets one block span several tracks, overlap another, or rearrange itself at different screen widths without extra markup.
Social platforms impose grids of their own. In January 2025 Instagram began replacing square profile thumbnails with taller 3:4 rectangles, and Adam Mosseri said cropping vertical uploads to squares had been pretty brutal. Anyone who had carefully planned a nine-square profile mosaic found it suddenly misaligned, a small reminder that a grid you do not control can change overnight.
Ratios: golden sections and aspect ratios
Grids often start from a ratio rather than a column count. Some divide the page by the golden ratio, about 1.618, to set the main column against a sidebar; others prefer simpler ratios such as 2:3. Neither is magic. The golden ratio calculator gives the numbers so you can test the proportion and judge it by eye.
Images bring their own proportions, and a grid has to accommodate them. Video is usually 16:9, many phone photos are 4:3 or 3:4, and vertical stories run at 9:16. If modules match common image ratios, pictures drop in without awkward cropping. The aspect ratio calculator converts any width and height into a matching size.
Breaking the grid on purpose
Rules exist partly to be broken well. A photo that bleeds off the page edge, a pull quote that crosses the gutter or a headline that ignores the column line can bring energy to a strict layout. The trick is that the break has to look deliberate, and it only reads that way when everything else stays aligned.
A Canadian aside makes the point. Allan Fleming’s CN symbol of 1960, one continuous line joining two letters, stands out on a rail car partly because the lettering around it is so plain. The graphic design basics guide covers that balance, and it applies to grid layout design as much as to logos.
Questions about grid layout design
What are the 4 types of grids in design?
The usual four are the manuscript grid, a single large text block; the column grid, which splits the page vertically; the modular grid, which adds rows to create a field of cells; and the hierarchical grid, built around the specific content rather than equal divisions. Many real layouts mix two of them on the same page.
What is a 12-column grid?
It is a layout divided into twelve equal columns separated by gutters. Twelve is popular because it splits evenly into halves, thirds, quarters and sixths, so one grid supports many different arrangements. Web frameworks such as Bootstrap made it the default for websites, although nothing forces a designer to use all twelve columns separately.
How wide should gutters be in a grid layout?
There is no fixed number, but gutters are usually tied to the type. A common approach makes the gutter equal to the line height of the body text or a simple fraction of it. On screens, values between 16 and 32 pixels are typical. Gutters that are too narrow make neighbouring columns read as one block.
What is a modular grid?
A modular grid divides the page into both columns and rows, producing a field of rectangles called modules. Images and text blocks then occupy one or several modules. Newspapers, catalogues and dashboards rely on modular grids because they hold many separate items. The structure keeps very different pieces aligned without making the page look rigid.
Is CSS Grid better than Flexbox for layouts?
They solve different problems. CSS Grid controls two dimensions at once, rows and columns, so it suits whole page layouts and card galleries. Flexbox handles one dimension, a row or a column, and is handy for navigation bars and small components. Most modern sites use both, with Grid for the page and Flexbox inside individual pieces.