A grid is a rhythm instrument, not a cage
A grid exists so the eye can relax — content aligned to shared vertical lines reads as organized without the reader ever counting columns. The moment a grid *shouts* is the moment alignment becomes visible as pattern: everything snapped to the same few positions, every card the same width, every gap identical, so the page looks like a spreadsheet wearing a nice font.
Rhythm beats symmetry. A page whose cards share a gutter and an edge but vary in internal structure reads as designed; a page whose every module is the same box reads as templated.
- Choose columns by content, not fashion: prose wants a 6-column book grid; a pricing page wants 3; a gallery wants 4–6; a dashboard wants 12 because its widgets are genuinely heterogeneous. If every module is the same shape, you needed 3 columns, not 12.
- Gutter before column count: pick the gutter (16–32px on desktop) that makes adjacent content feel related-but-distinct, then divide the rest. Changing the gutter changes the reading of every module; changing column count changes only the module widths.
- Break the grid on purpose, once: a full-bleed hero or a pulled quote that ignores the columns proves the grid is a decision, not a constraint — one deliberate break per page is punctuation; five is chaos.
- Alignment is a promise: if two modules share an edge, their interiors should share its logic — a card aligned to the left edge should start its text on that edge, not 20px in for no reason.
The quiet grid in practice
quiet-grid.css
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(16px, 2.5vw, 32px);
}
.module--prose { grid-column: span 6; } /* book rhythm */
.module--card { grid-column: span 4; }
.module--wide { grid-column: span 8; }
.module--full { grid-column: 1 / -1; } /* the one break */