Column count sets which proportions you can even express
Aliases: column count · 12-column grid · column span
What it is
Column count is a vocabulary of width ratios. Twelve columns can say 8+4, 6+6, 3+9, 4+4+4. Four columns can mostly say halves, quarters and 1:3. Picking a count is picking which proportions in the product land on a track, and which can only be fudged.
A dashboard wants a 2:1 chart-and-table. If the count is not divisible by three, 2:1 has no integer span. You end up with 3:1 or 1:1: a starved chart or a sparse table.
Why it happens
A grid only admits integer spans. A desired ratio must be writable as a:(n-a) for column count n. 2:1 needs n as a multiple of 3; equal thirds need the same; 5:7 is cleanly almost only a 12-track. Too few columns and the vocabulary is tiny. Too many and adjacent spans differ by less than a just-noticeable width, which is fake precision.
Phones often drop to two or four tracks not because “mobile should be simple,” but because slicing 360 px into twelve makes the gutter compete with the column, and ratios stop meaning anything. Column count is a vocabulary that should change with available width, not a habitual number.
Where it stops holding
A single-column article, a chat, a full-bleed video never asked for a ratio vocabulary. The moment modules sit side by side — rail and main, master-detail, three price tiers, tools-plus-canvas — the count starts forbidding compositions.
Fluid percentages can express any ratio without integer spans, but then modules no longer share a stackable width kit. That is a different bargain; it is not still “speaking grid.”
Applying it
- List the width ratios the product actually uses (2:1 master-detail, thirds, full bleed, one-third inset image). Choose a count that lands all of them on integer spans; do not copy 12 and reverse-engineer.
- On narrow widths, switch to a shorter vocabulary (4 or 2) and write the degeneration of each ratio so nobody treats 8+4 as live at 360 px.
- How to check: measure every side-by-side module as “how many columns.” A 2.5-column span, or the same ratio implemented as different spans on different pages, means the count is not carrying the proportion.