When design moved from the printed page to the screen during the late 1980s and 1990s, it might be assumed that the grid would lose its relevance, given how different screens are from printed pages. In fact, the grid did not disappear; it adapted to a new set of constraints, including variable screen sizes, interactivity, dynamic content, and the pixel as a unit of measurement in place of the millimetre.
Early attempts at digital grids were relatively crude. Web designers in the 1990s used HTML tables, a structure originally intended for displaying data, as a workaround for creating column-based layouts. This produced pages divided into two or three columns with fixed pixel widths. The limitations were considerable: layouts broke on screens narrower or wider than expected, and the structure was largely inaccessible to screen-reader software used by visually impaired users.
Improvements followed gradually. The introduction of CSS in 1996 separated visual presentation from underlying structure, allowing designers to avoid relying on table markup for layout purposes. In the mid-2000s, float-based CSS grid frameworks emerged, most notably Nathan Smith’s 960 Grid System (2008), which divided a 960-pixel-wide page into 12 or 16 equal columns. This represented a significant development, since it gave web designers and print designers a shared conceptual framework for the first time.
The more substantial shift came with Ethan Marcotte’s 2011 book Responsive Web Design, which introduced the concept of the fluid grid. Rather than defining column widths in fixed pixels, Marcotte proposed defining them as percentages of the available space, allowing a layout to adapt automatically to any screen size, from a 320-pixel smartphone to a 2560-pixel monitor. The calculation involved is straightforward: an element’s width is divided by its container’s width to produce a percentage. The broader implication, however, was significant: the grid was no longer a fixed structure, but a flexible system that preserved its proportional relationships at any scale, echoing the same principle used centuries earlier by Villard de Honnecourt and Jan Tschichold, though expressed here in percentages rather than diagonals.
Modern CSS Grid Layout, supported across all major browsers between 2017 and 2018, represents the most advanced version of this system to date. It allows elements to be positioned along both horizontal and vertical axes simultaneously, enabling complex, magazine-like layouts with overlapping elements and asymmetric columns directly within the browser. It also uses the same conceptual vocabulary as print design: columns, rows, gutters, and spanning. In many respects, this represents the fullest realization of Müller-Brockmann’s original vision, a single coherent system of order that applies consistently across different media.
The grid is currently encountering a further development in the form of artificial intelligence. Tools such as Adobe Firefly and Figma’s AI layout features can analyze a collection of text and images and propose a grid-based layout that follows established principles of hierarchy and balance, largely without human intervention. Notably, some studies have found that experienced designers rate these AI-generated layouts as competent, and in some cases superior to human-made alternatives. This raises an important question: if a system can learn the principles of the grid and apply them independently, what role remains for the human designer?
“The grid is not a straitjacket. It is a set of relationships. Understanding those relationships is what makes a designer human, or artificial.”
Ellen Lupton, Thinking with Type, 3rd ed., 2023
A reasonable answer is that the grid was never purely a technical problem to begin with. It originates from elements such as the natural reach of the human arm, a comfortable reading distance, and the eye’s need for rhythm. These are not problems that can simply be optimized away by improved software; they are closer to durable facts about how humans communicate with one another. Understood in this way, the grid is not an outdated design convention, but one of the most enduring tools developed for transmitting an idea from one mind to another.
This concludes the first half of this research series. The following posts extend the discussion of the grid into adjacent fields, including trust, culture, urban planning, and accessibility.
