Twelve-Column Grids Became a Default. Andy Clarke Wants Them to Be a Choice

Thirty years of web layout history has compressed almost every page on the internet into one structure: the twelve-column grid. Andy Clarke, the designer behind the forthcoming book Standout Designs for the Web, argues that this convention — inherited from Blueprint CSS in 2007 and Nathan Smith's 960 Grid System in 2008, then cemented by Bootstrap and Foundation — now constrains design work more than it helps it. Pre-orders for the book opened in the CSS-Tricks store, with publication set for November 20 at $14.99 for DRM-free EPUB and PDF editions.

Where did the twelve-column grid come from?

The lineage runs through three decades. In 1996, designers laid out pages with HTML tables and spacer GIFs, a technique David Siegel popularised in Creating Killer Web Sites. CSS floats and positioning followed, though neither was built for page layout and inconsistent browser behaviour made them frustrating. When frameworks arrived, they standardised the grid: Blueprint CSS shipped a 24-column system in 2007, and the 960 Grid System offered 12- and 16-column options in 2008. Twelve columns won out because it divides cleanly into halves, thirds and quarters — producing the 2-up, 3-up and 4-up patterns seen everywhere online today.

The problem, Clarke says, isn't the grid itself. Graphic designers had used column-based and modular grids for decades before the web. The problem is reaching for a familiar solution before asking what makes the company distinctive and what its website needs to communicate. "A layout does more than arrange content," he writes. The size, position and relationships between elements shape how people experience a site — a restrained, orderly composition communicates something very different from one full of energy and movement.

What does starting with content instead of columns look like?

To demonstrate, Clarke invented Wheelman, a fictional company for his book that serves getaway drivers — legal advice, robbery insurance, an online shop selling break-in essentials, and a magazine about life behind the wheel. Wheelman is rebellious but professional, serious but playful, and its audience of criminals still demands to find products and buy them. That tension rules out both a plain single-column layout and chaotic novelty.

His process for a shop landing page starts with relationship questions:

• Which elements deserve the most attention?
• What belongs together?
• Is there a natural order to the information?

Only then does he turn to visual decisions — whether a large photograph sets the scene, whether whitespace creates spaces to pause, how images and text form a considered composition. Two equal-width columns would give Wheelman's two products equal prominence; changing their proportions creates hierarchy even when individual elements stay the same size.

How do modular and compound grids change the work?

Columns, Clarke notes, only divide space vertically. Adding rows creates a second dimension: where columns and rows intersect, they form modules, and combining modules creates larger spatial zones that establish hierarchy, control whitespace and add variety. A four-column, four-row grid yields sixteen modules — and none of them need filling. A graphic headline and product image can spread across four modules while product information occupies one each. The result still reads as a product page, with clear order and room to breathe, but it feels unmistakably like something Wheelman would publish. Because one composition won't work at every screen size, he adjusts the size and quantity of modules responsively.

Compound grids push further. A compound grid combines two or more grids — column, modular or hierarchical — on the same page, overlapping, side by side or stacked. Overlaying a two-column grid with a three-column one produces four columns of two different widths: room for a wide photograph or headline, with a pullquote in a narrower space. In the book, Clarke mixes four- and five-column grids to build different compositions for Wheelman's pages while keeping a connected visual structure across the magazine, shop and services sections. The goal, he stresses, isn't making every page different for its own sake — it's giving each section a layout suited to its content while everything still feels like one company.

Does this apply beyond layout?

Yes, and Clarke is explicit about it. The same deliberateness should govern colour choices, typography, commissioned imagery and how those elements combine. Twelve-column grids remain useful, and the 2-up, 3-up and 4-up patterns they inspire can be exactly right — but choosing them automatically leaves little room for the character that makes websites memorable.

Everyone who pre-orders Standout Designs for the Web receives the Hardboiled Client Interview Guide free, a companion designed to help designers ask better questions and discover what makes a company distinctive. As CSS Grid keeps expanding what's structurally possible, the pressure to start every design from twelve equal columns looks less like a convention and more like an unexamined habit.