12-column grid

Twelve columns won because 12 divides by 2, 3, 4, and 6. One row can hold halves (6 + 6), thirds (4 + 4 + 4), quarters (3 + 3 + 3 + 3), or a lopsided 8 + 4 sidebar split, and every one of those still lands on the same vertical lines. The grid itself is three numbers: column count, gutter (the gap between columns), and margin (the space outside the outermost columns). The 960 Grid System popularised it, Bootstrap made it universal, and Figma ships it as a default layout grid.

You reach for it whenever more than a couple of sections need to agree with each other. In CSS it is one line, grid-template-columns: repeat(12, minmax(0, 1fr)) plus a gap, and children claim tracks with grid-column: span 4. The grid is a shared agreement, not decoration, so its value is proportional to how many components respect it.

Gotcha: use minmax(0, 1fr) rather than a plain 1fr track. A 1fr track refuses to shrink below its content, so one long unbroken string or a wide table blows the whole grid past the viewport. Second gotcha: 12 columns is a desktop convenience, not a law of nature. Narrow screens drop to fewer: Material Design's responsive grid uses 4 columns on phones, 8 on tablets, and 12 on desktop, and plenty of teams pick their own step such as halving to 6. Trying to keep twelve 20px columns on a phone produces nonsense.