Compound grid

One column count is a compromise. Four columns are right for a feature and too coarse for a list of small items; six are right for the list and leave a feature looking thin. A compound grid resolves the argument by refusing to pick: two grids are drawn over the same measure, a four and a six, and each element is placed on whichever of them suits its content. The layout keeps one set of margins and one set of edges, so the page still reads as one structure rather than two pasted together.

What makes it work is the lines the two grids share. Over the same width a four and a six agree at the centre, and everything either side of that line is on a rhythm of its own. That shared line is the joint: content on either grid meets there without a jog, so the eye reads a single vertical spine and not a collision. Pairs that share more lines are calmer and pairs that share fewer are livelier, which is the real craft in choosing the two counts. Some pairs, three against four for instance, share nothing at all inside the measure, and a layout built on them has to earn the tension it creates.

The idea is Swiss, from the grid theory of the 1950s and 1960s, where a page was often set on two systems at once. Mark Boulton reintroduced it to web designers in his series on designing grid systems, and for years afterwards it stayed mostly theoretical: with floats and fixed pixel columns, maintaining two overlaid systems by hand was more arithmetic than any deadline allowed. CSS grid changed the economics. Two sets of tracks are two declarations, a block moves from one rhythm to the other by changing its column range, and the browser does the arithmetic at every viewport width.

Against a plain layout grid, the compound grid is not a different kind of thing, it is two of them, agreed to in advance and documented together. It pairs naturally with a modular scale, which does the same job vertically: several related rhythms that share values rather than one rhythm imposed everywhere. And it is not a broken grid. Nothing here is being violated. Every element is on a grid, and the only question is which of the two.