Why the 12-column grid shouldn't be the automatic default for every layout

An article published on CSS-Tricks (link in the original piece) questions a habit that nearly every front-end developer carries without thinking: starting any layout by dividing the page into 12 columns. The piece doesn't attack the 12-column grid itself, but rather the autopilot of reaching for it before understanding what the content and the business actually need. For those who only look at CSS Grid from a technical angle, it's worth understanding where this standard comes from and what it means to move away from it in practice.

Where the 12-column standard comes from

The history the article traces helps explain why this number became a near-unanimous choice. In 1996, David Siegel's book Creating Killer Web Sites popularized HTML tables and spacer GIFs as a layout solution, a hack nobody designed for that purpose but that worked for lack of an alternative. Then came float and CSS-based positioning, also improvised for this function, with inconsistent behavior across browsers.

The first real relief came with ready-made grid frameworks: Blueprint CSS, in 2007, with 24 columns, and Nathan Smith's 960 Grid System, in 2008, with 12- and 16-column options. Bootstrap and Foundation later cemented 12 columns as the convention, because the number divides cleanly into halves, thirds, and quarters, exactly the 2-, 3-, and 4-column layouts that show up on any site. CSS Grid arrived and solved the technical layout problem, but the editorial habit stuck: many people still start by dividing the page into 12 and only then fit the content in.

The problem isn't the grid, it's the missing question

The article's central argument is that the right question isn't "how many columns," but rather what sets the company apart and what the page needs to communicate before any grid decision. To illustrate, the piece uses a fictional case study, Wheelman, a made-up brand that sells products and services for getaway drivers (heist insurance, legal counsel, equipment store). It's a joke, but the design problem is real: how to make a product page that feels like Wheelman and not a generic e-commerce template.

The proposed solution swaps columns for modules: a grid of 4 columns by 4 rows (16 modules), where each element occupies one or more modules according to its importance. This gives control over visual hierarchy without relying solely on column width. In CSS Grid, this is straightforward to implement:

.product-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem;
}

.product-layout__headline {
  grid-column: span 4;
}

.product-layout__hero-image {
  grid-column: span 2;
  grid-row: span 3;
}

.product-layout__buy-box {
  grid-column: span 2;
}

The result is a composition with uneven weight between elements, something a pure column grid doesn't deliver without resorting to special width classes.

Compound grids: mixing things up to avoid repeating the template

The second technique the article describes is the compound grid: overlapping two different grids (for example, one with 2 columns and another with 3) to generate new dividing lines. A 2-column grid (50%/50%) overlaid on a 3-column one (33.3% each) creates, at the points where the lines coincide, four columns of distinct widths: two wide ones at the edges and two narrow ones in the middle. In CSS, this becomes a single grid-template-columns declaration with specific proportions instead of equal fractions:

.compound-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 1rem;
}

The gain is variety across pages of the same brand without losing a common structure. Wheelman's magazine, store, and services can use different combinations of the same set of lines, and still feel like part of the same site.

Where subgrid comes in

The article doesn't mention subgrid because it's a design piece, not an implementation one, but it's exactly the missing piece to make compound grids work consistently across sections with different HTML. Without subgrid, each section with its own display: grid has independent lines, and visually aligning two overlapping grids becomes manual trial and error with fr and gap. With subgrid, a child section inherits the parent grid's lines:

.section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

This guarantees that, even when the content of each block changes, the edges keep lining up with the compound grid defined above. In practice, this makes subgrid a viable technique for those who can already adopt it today, not just a theoretical design exercise.

What changes for those implementing it

Modular grids and compound grids solve a visual identity problem, but they bring technical costs the article doesn't address, costs that fall on developers to calculate:

• Responsiveness becomes more work. A 12-column grid has known, tested breakpoint rules; a 16-module grid with variable spans needs grid-template-areas redefined per breakpoint, one by one.
• Reading order and accessibility require redoubled attention. Freely positioning elements with grid-column/grid-row doesn't change DOM order. If the visual order drifts from the reading order, screen reader users navigate in a sequence different from what appears on screen. It's worth testing keyboard navigation and VoiceOver/NVDA whenever the visual layout diverges from the HTML.
• Design system maintenance gets more expensive. A 12-column grid allows component reuse across pages; compound grids per section tend to generate context-specific CSS, which weighs heavily on projects with few front-end people and a lot of deadline pressure.

In short: the gain in visual personality has a direct trade-off in maintenance complexity and accessibility testing, and that needs to be part of the conversation with whoever decides the project's timeline and scope.

When the 12-column grid is still the right choice

The original article doesn't dismiss the 12-column grid: it acknowledges that it remains useful and doesn't suggest abandoning it altogether. The point raised is different: reaching for it automatically, without thinking about what the content calls for, leaves little room for the character and personality that make a site memorable.

In practice, this suggests the 12-column grid still makes sense when predictability matters more than visual expression, or when swapping out the foundation of an already established layout costs more than the gain in personality would be worth. Either way, the decision should come from a conscious choice, not habit.

The book that inspired the article, Standout Designs for the Web, covers these grid, color, and typography concepts in more depth and will launch on November 20, for US$14.99 in DRM-free EPUB and PDF editions, with pre-orders already open in the CSS-Tricks store. For those who work alongside designers, the article's practical point is simple: asking the designer why the grid has that particular number of columns is just as valid a question as asking why the endpoint has that particular response format.