Open ten small-business websites at random and you will probably spot the same skeleton in most of them: a full-width banner, a row of three feature boxes, a row of four testimonials, then a footer. None of it is wrong. It is just forgettable, and much of that sameness comes from one quiet habit – carving every page into twelve equal columns before anyone has asked what the page is actually for.
A growing number of designers are pushing back on that habit. Their argument is not that the twelve-column grid is broken, but that it has become a reflex rather than a decision.
How Twelve Columns Became the Default
Early web layouts were held together with HTML tables and invisible spacer images. CSS floats and positioning came next, though neither was really designed for building whole pages, and browsers rarely agreed on how to render them. Grid frameworks arrived in the late 2000s to bring some order: Blueprint offered 24 columns, the 960 Grid System offered 12 or 16, and Bootstrap and Foundation later cemented twelve as the standard.
Twelve is a sensible number. It splits cleanly into halves, thirds and quarters, which is exactly why rows of two, three and four cards are everywhere. Print designers had relied on column and modular grids for decades before the web borrowed them. The trouble is that a convenient number turned into the automatic starting point for nearly every project – even now that CSS Grid lets us build almost any structure we can imagine.
Start With the Brand, Then Draw the Lines
The alternative is to begin with the business rather than the grid. What sets it apart from its competitors? What should a visitor remember an hour after leaving the site? Is the tone calm and precise, or loud and playful? A tidy, symmetrical arrangement says something very different from one with oversized headings and off-centre images, so layout is part of the brand voice, not just a container for it.
Only once that is clear does it make sense to look at the content itself: which item matters most, which pieces belong together, and what order people should read them in. Then come the visual questions – does a big photograph set the scene, could white space give the reader somewhere to pause, should the introduction be the loudest thing on the page? The grid is chosen to serve those answers, not the other way round.
A Quick Jargon Buster
- Column grid – the familiar approach: the page is split into vertical strips, and content spans one or more of them.
- Modular grid – rows are added as well as columns. Where they cross, they form rectangular cells called modules, which can be merged into bigger zones.
- Compound grid – two or more grids laid over each other on the same page. A two-column grid on top of a three-column grid, for example, produces four columns of two different widths.
- Hierarchy – the visual pecking order that tells a visitor what to look at first, usually created through size, position and contrast.
Putting It Into Practice: An Independent Bike Shop
Picture a small cycle shop launching two new e-bikes on its homepage. The default treatment would place them side by side in two equal halves – tidy, but it tells the visitor that both bikes are equally important, which is rarely true.
Simply changing the split to roughly two-thirds and one-third creates an instant ranking, even if the photos and text stay the same size. Go a step further with a four-by-four modular grid and there are sixteen cells to play with. The headline and hero shot of the flagship bike could stretch across four of them, the price and “book a test ride” button could sit in single cells beside it, and accessories below could occupy one cell each, with the occasional item stretched across two to break the rhythm.
Not every cell needs filling – empty modules become breathing space. On smaller screens, the number of modules can be reduced so the page still reads in a sensible order. And the shop’s blog or repair-service pages can use a compound grid, say four columns overlapping five, giving each section its own arrangement while still feeling part of the same family.
Is It Worth the Extra Effort?
The upsides:
- Pages look like they belong to one specific business rather than a template.
- Varying the size of items gives a clearer sense of what matters most.
- Different sections can have their own character while sharing an underlying structure.
The trade-offs:
- More design and testing time, especially across screen sizes.
- A single-column or standard twelve-column layout is simpler to make responsive.
- Done carelessly, an unusual layout can make products or contact details harder to find.
None of this means abandoning twelve columns. Sometimes a neat row of three cards is exactly what a page needs. The point is to choose it deliberately, and to apply the same thinking to colour, type and photography too. Being different purely for the sake of it is never the aim; a website that could only belong to your business is.
