14 September 2026·15 min read

Everything in Its Place

The grid is back on the surface of the page: drawn, not hidden. What a grid-based or modular layout is, why the exposed grid is the look of the moment, and how to build one today.

A few days ago I decided this website looked a little plain. Not wrong, exactly. The type was good, the spacing was careful, the colours held together. But it felt like a set of nice things placed near each other rather than one thing. So I went and read up on what is moving in design this year, and one idea caught my eye at once for being simple and sophisticated at the same time. Lines. Cells. A grid you could see, holding everything in place. This piece is what I found: what a grid-based or modular layout is and is not, why the grid is back on the surface of the page right now, and how one is built today.

What a grid is

A layout grid is a set of columns, gutters and margins that gives a page a structure to place things on.¹ A modular grid adds rows, so that the crossings become modules, small fields a block can fill or leave empty.^{1, 2} That is the whole vocabulary.

01
Margin
The space from the edge of the page to the first column, and the same on every side.
02
Column
One vertical field's width. Content stands in columns, never in the gaps between them.
03
Gutter
The gap between two columns, the same width all the way down.
04
Row
One row's height, what a modular grid adds: the columns cut across, with a gutter between.
05
Module
One cell, where a column and a row cross. The unit everything is measured in.
06
Block
Content takes whole modules, one or several, across or down, never a part of one.

The parts of a modular grid. Take the rows away and what is left is a column grid, which is what most web pages actually stand on.

Timothy Samara sorts grids into families, and most real pages mix them.² A column grid shares vertical lines only, and blocks take whatever height they need; nearly every reading page on the web is a column grid, and this text reads on one, though the pages around it move onto modules wherever the content is a set of things. A modular grid has rows as well and suits content that comes in repeating pieces: a catalogue, a dashboard, a wall of features. A hierarchical layout is built around the content's own proportions, with a few key alignments and the rest placed by importance.^{1, 2} And a broken grid keeps a grid and lets elements cross it on purpose, so the page has tension and a hand behind it.²⁵

Modular grid

Columns and rows. Every block fills whole modules, across or down.

Column grid

Shared vertical lines only. Blocks take whatever height they need.

Hierarchical

Placed by importance and proportion. A few key alignments, the rest by eye.

Broken grid

A grid is there, and things cross it on purpose. Tension, and a hand behind it.

The same six blocks laid out four ways. Only the first two are grids in the strict sense; the third borrows a few of their lines, the fourth crosses them on purpose.

Grids work because of how people see. Things that are close together read as belonging together, and things that line up read as related, before a single word is read.⁶ A grid guarantees those shared edges on every page. Nielsen Norman Group compares it to the streets of New York: the predictability of the blocks helps locals and tourists alike find their way, and a reader who has learned a page's structure once stops noticing it.¹

What a grid is not

A framework's twelve invisible columns do not make a page grid-based; almost every site has those, and nobody would call them a design.¹⁴ A spacing scale does not either: the eight point system most design systems run on is a rhythm for the space inside and between things, and it should agree with the layout grid, but it is not one.¹³ A baseline grid, the print habit of locking every line of text to one vertical rhythm, is a third thing again, and rarely survives fluid type and pictures on the web. And a pattern of lines behind content that ignores them is the opposite of a grid. A grid is a design only when the content stands on it, which is easier to see than to say:

Lines the content ignores

Lines the content stands on

The same lines and the same six blocks. On the left the blocks were placed by eye and the lines are only decoration behind them: a pattern, not a grid. On the right every block is placed by the lines: its box begins the same small step inside one line and ends the same step before another, whether it spans one cell or three, and no edge lands in the middle of a cell. Only then is the page grid-based.

Where the lines come from, briefly

The grid as a discipline comes out of Switzerland after the war. Josef Müller-Brockmann, whose Tonhalle concert posters you have seen even if you do not know his name, wrote it down in 1981 in the book that is still the standard text, and Karl Gerstner wrote about designing programmes, rules that generate a whole family of layouts rather than one page.^{3, 4} Massimo Vignelli gave the idea its shortest form: there are infinite grids, but for each problem only one is the appropriate one.⁵ None of them were talking about looks. The grid was a tool for order, clarity and economy, a way to make a thousand decisions once instead of a thousand times.³

The web caught up slowly. Mark Boulton carried ratios and columns onto the screen in 2005 and Khoi Vinh wrote the book on grids for the web in 2010, but a real grid still had to be faked with floats.^{7, 8} In March 2017 nearly every browser shipped CSS Grid Layout within three weeks of each other; subgrid and container queries followed in 2023.^{9, 10, 11, 12} The tools have been complete for about three years, and that matters for what comes next.

Why now: the grid, drawn

Trend reports of the last two years all have the grid in them, but they describe two different things.

The louder one is the bento grid: a wall of tiles of different sizes that together fill a rectangle, each tile one complete idea. Apple made it the language of its keynotes in 2022 and 2023, where the size of a tile did the work that bullet points fail at, and within two years it was the default feature section of nearly every software landing page.^{22, 23} It is a modular grid used for one section, and it works exactly as well as its hierarchy. When every tile has the same size and weight, the wall says nothing. One designer put the failure precisely: the bento grid is what a tool reaches for when it wants to look like it made a layout decision without actually having to make one.²⁴

Every tile alike

Weighted

The same six things on the same modular grid. On the left nothing is first. On the right the sizes say what matters before a word is read, which is the whole point of the bento layout and the part most copies leave out.

The quieter one, and the one that caught me, is the exposed grid. The whole page stands on hairlines drawn its full height, content visibly sits in cells, a small cross marks where two lines meet, monospaced index numbers sit in the corners, and nothing floats over anything. The lines are not a background. They are the layout, shown.

01
Hairlines the full height of the page, not a box around each block.
02
Content in cells: every block begins and ends a fixed step inside a line, whether it spans one cell or three.
03
A small cross where two lines meet, from the printer's crop mark.
04
Monospaced index numbers and labels in the corners of cells.

The exposed grid, the look of the moment: the layout drawn rather than hidden.

Vercel made the look iconic with its own site and then put it into its design system as a component, for layouts "where the rule lines and cell borders are part of the design".¹⁶ Stripe, Tailwind and Linear followed, then hundreds of developer tools, studios and portfolios, until the look had a name of its own, the blueprint grid.¹⁷ Tuts+ called the visible grid a trend in its own right in late 2024; this year's reports describe grids as foreground elements and wireframe logic brought into finished interfaces.^{21, 18}

Why now? Three things met. The first is fatigue: after a decade of soft cards, gradients and floating blobs, and two years in which generative tools can produce that look endlessly, a page that shows its own structure reads as a decision someone made.^{18, 20} A writer on the related tech-spec look put it well: a dimension line is a promise that somebody measured something.¹⁹ A drawn grid is the same promise at the scale of the page. The second is the tools: with grid, subgrid and container queries in every browser, the structure a designer draws is the structure the browser lays out, lines and all.^{11, 12} The third is the content. Interfaces carry more dense information every year, and the grid is the oldest tool for making density readable.³ There is a counter-current, an anti-grid brutalism and a taste for broken, asymmetric pages, and it is a reaction to the same sameness.^{23, 25} One shows the structure; the other pushes against it. Either way the page needs a structure worth the gesture.

How to build one today

The columns are the last decision, not the first. A grid becomes a design in the choices made before any number is written down, and they come in this order.

Start from what the page has to carry. Write down the kinds of thing on it: the reading, which wants one comfortable column of forty-five to seventy-five characters; the sets of things, features, works, steps, numbers, which want modules; and the few objects that matter more than everything around them.¹⁵ Müller-Brockmann works from the inside out for the same reason: the type size and the line length that read well give the column, and the column and the page give the count.³ The grid is the answer to that inventory. If the inventory is a long essay and nothing else, the answer is one column and no rows.

Give every kind of thing a home, once. A heading runs across three cells; reading copy starts on the midline; a portrait is one cell; a list of steps is one step per cell; the facts of a piece stand in the last cell. Those placements are the design. A page built this way is a set of rules about where kinds of things go, not a set of positions, and a new block is placed by asking which kind it is.

Let size carry the weight. On a grid, importance is said through span: what takes three cells matters more than what takes one, and what stands alone on its line matters more than what shares it. That is the whole of the bento layout's lesson, and the part its copies leave out. Rows belong only where the content is a set of things, and there one thing should be large and the rest smaller, never a wall of equals. Forcing a paragraph into a fixed module height is how tiles end up with three words rattling in them.

Hold one step everywhere. Every block stands the same small step inside its lines, whether it spans one cell or three, and no edge of it lands in the middle of a cell. The space inside a block runs on the same scale as the space between blocks, which is what the eight point system is for.¹³ That agreement is what makes the lines and the type read as one thing rather than two.

Draw only what the content uses. If the lines are to show, each section decides which of them run through it: a two column text keeps its midline, a reading column has the lines opened over it, a table takes all four. Then walk every block on every width and move whatever is not in its place. A drawn grid is unforgiving in the best way: a block that is nearly in place looks worse than one that ignores the grid entirely.

Only now the numbers. Twelve columns on a wide screen, because twelve splits into halves, thirds, quarters and sixths, so two, three and four column sections all land on the same lines; eight on a tablet, four on a phone; gutters of sixteen to twenty-four pixels, margins at least as wide as a gutter.^{13, 14} Twelve is a habit, not a law: if the design only ever uses four fields, four cells of three columns each is a clearer grid than twelve you never see.¹⁴

Wide screen

12 columns

Tablet

8 columns

Phone

4 columns

The usual counts by width, with gutters of 24 on the wide screen and 16 on the others. The dark lines are one reading column of a comfortable measure: six of twelve on a wide screen, six of eight on a tablet, all four on a phone.

Declare it once. On the web the grid is one rule, and every block says which line it starts on and how many columns it spans, which is exactly the set of placements above written down.¹⁰ This is roughly what holds this page together:

.page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
}
.lead  { grid-column: 1 / span 9; }  /* three cells of four */
.aside { grid-column: 7 / -1; }      /* from the midline to the edge */

@media (max-width: 767px) {
  .page { grid-template-columns: 1fr; }
  .lead, .aside { grid-column: 1; }
}

The minmax(0, 1fr) matters: a bare 1fr has an automatic minimum, so a long word or a wide picture can push its column past the line.¹⁰ A block inside a cell can inherit the page's lines with subgrid, so a card's insides still line up with the cells beside it.¹¹

01
Four columns
The headline runs across three cells, the picture takes the fourth, and the text stands on the midline.
02
Two columns
The same blocks, on half the cells. Nothing is redesigned; every block just knows which line it starts on.
03
One column
On a phone the grid is one cell wide. The blocks stack in reading order, still one gutter inside the edge.

The same six blocks on four, two and one columns. The blocks never change; only the grid under them does.

Let it collapse. Four cells on a desk, two on a tablet, one on a phone, and every block only knowing which line it starts on, so the phone version is already there in the rules.¹³ The blocks never change; only the grid under them does.

Everything in its place

The Swiss school could be severe about all this, but Müller-Brockmann himself is more generous than his reputation: the grid, he writes, is an aid, not a guarantee, and each designer has to look for a solution appropriate to their own style.³ This site now stands on four drawn cells, every block one gutter step inside its lines, and the pleasure of it is how decisive it is. Every question about where something goes has a short answer, and because the structure holds, there is room for one loose thing on top of it: the cells under your pointer take a faint colour and leave a trail as you move.

If you are wondering whether the trend will last, I think the drawn lines will fade the way every surface fades, and the bento walls before them. The grid underneath is not a trend. It is seventy years of people working out how to make a page easy to read, and it will still be there when the next fashion has come and gone.

References

1
Kelley Gordon, Using Grids in Interface Designs. Nielsen Norman Group, 2022. Columns, gutters and margins; column, modular and hierarchical grids; the city block comparison; content in columns, never in gutters.
2
Timothy Samara, Making and Breaking the Grid, third edition. Rockport, 2023. The four grid families, manuscript, column, modular and hierarchical, and the second half on breaking them.
3
Josef Müller-Brockmann, Grid Systems in Graphic Design. Niggli, 1981, bilingual, still in print. The standard text; the grid as "an aid, not a guarantee".
4
Karl Gerstner, Designing Programmes. 1964; reissued by Lars Müller Publishers. Design as a system of rules rather than a series of single pages.
5
Massimo Vignelli, The Vignelli Canon. Lars Müller Publishers, 2010, and free as a PDF from the Vignelli Center at RIT. The chapter on grids, margins, columns and modules.
6
Max Wertheimer, Untersuchungen zur Lehre von der Gestalt II. Psychologische Forschung, volume 4, 1923. The paper that set out the laws of grouping, proximity and similarity among them.
7
Mark Boulton, Five simple steps to designing grid systems. A series in five parts, 2005, from ratios on paper to flexible grids on the web.
8
Khoi Vinh, Ordering Disorder: Grid Principles for Web Design. New Riders, 2010.
9
Rachel Andrew, CSS Grid lands in Firefox 52. March 2017. Chrome, Safari and Opera followed within the month, a specification of that size never having shipped so nearly at once before.
10
W3C, CSS Grid Layout Module Level 1. Edited by Tab Atkins Jr., Elika J. Etemad, Rossen Atanassov and Oriol Brufau. The specification, including the note that a flexible length outside minmax() implies an automatic minimum.
11
MDN Web Docs, Subgrid. In every major browser since September 2023.
12
MDN Web Docs, CSS container queries. In every major browser since February 2023.
13
Material Design, Responsive layout grid. Four, eight and twelve columns by breakpoint; gutters and margins of 16 or 24 on an 8dp grid.
14
Nick Babich, Building Better UI Designs With Layout Grids. Smashing Magazine, 2017. Why twelve divides so well, and why there is no point in twelve columns if the layout only needs eight.
15
Robert Bringhurst, The Elements of Typographic Style, fourth edition. Hartley and Marks, 2012. On the measure: forty-five to seventy-five characters, sixty-six about ideal.
16
Vercel, Geist design system: Grid. A component for "two-dimensional cell-and-guide layouts in marketing pages, docs landing pages and feature breakdowns where the rule lines and cell borders are part of the design", with crosses at the intersections.
17
Roman Kamushken, Vercel aesthetic: a complete guide to Blueprint Grid design. Setproduct, April 2026. The look, its spread to Stripe, Tailwind, Linear and hundreds of others, and what it signals.
18
Ernest Asanov and Anastasiia Lutsenko, What's Next: 7 UI Design Trends of 2026. Tubik. Grids as foreground elements, wireframe logic in finished interfaces, and visual saturation as the reason.
19
Studio 2am, Tech Spec Is the Design Trend Replacing Clean Minimalism in 2026. August 2026. Blueprint marks and dimension lines as a reaction to a minimalism generative tools can reproduce endlessly, and a warning about overdoing them.
20
Fireart Studio, Web Design Trends 2026: Tactile Brutalism and Invisible Architecture. April 2026. One pixel borders and no shadows as a reaction to homogenised, generated design, and the bento paradox on phones.
21
Brenda Barron, Making the most of the visible grid web design trend. Envato Tuts+, November 2024. The exposed grid as a trend of its own, with examples.
22
Deck.gallery, Apple's bento grid playbook: four keynote decks compared. May 2026. The 2022 and 2023 keynotes, and why the size hierarchy does the editorial work.
23
Studio Meyer, Web Design Trends 2026: What Actually Held Up After Six Months. May 2026. Bento layouts as the default, and an anti-grid brutalism appearing as the counter-move.
24
ux-skill, Why every AI UI reaches for the bento grid. May 2026. "The bento grid is what AI reaches for when it wants to look like it made a layout decision without actually having to make one."
25
Envato, Web design trends for 2026: kinetic type, broken grids and the return of visual personality. March 2026. Breaking the grid as this year's counter-current.

More notes
from the work.

All writing→