CSS Grid is the only layout tool that matches the brutalist ethos. It is structural, explicit, and honest. You define tracks, you place items, and the grid shows you its own bones. Flexbox is fluid; Grid is architectural.
THE 12-TRACK BASELINE
Start every layout with twelve equal tracks. This is not a rule — it is a habit that makes asymmetric placement predictable. With twelve columns, you can span 2, 3, 4, 6, or 8 without fractions, and the gutters align across every row.
The Boilerplate
grid-template-columns: repeat(12, minmax(0, 1fr)) with a gap from your spacing scale. The minmax(0, 1fr) prevents content from blowing out the track — a common Grid pitfall when images or long words refuse to shrink.
ASYMMETRIC SPANS
A brutalist grid does not center everything. It places. A 7/5 split — article left, sidebar right — is more honest than a centered column with a float. The reader sees the decision: the content gets more room than the metadata, and the grid says so.
"Symmetry is rest. Asymmetry is movement. A grid that is always symmetric is a grid that never goes anywhere."
Spanning in Practice
Use grid-column: span 7 for the main content and grid-column: span 5 for the sidebar. On the next row, reverse it — span 5 then span 7. The rhythm of alternating spans creates visual movement without a single line of animation.
NEGATIVE SPACE IS A TRACK
Empty grid cells are not wasted — they are composed. A 12-track grid with a 4-track article and 8 tracks of nothing is a deliberate statement: this is all there is, and the rest is silence. Brutalist layouts use negative space as a material, not a leftover.
How to Place Nothing
Do not fill every cell. If an item ends at track 5, let tracks 6–12 stay empty. Do not add a decorative element to "balance" it. The emptiness is the balance — it gives the content room to breathe and tells the reader that what is there is there because it matters.
RESPONSIVE WITHOUT REBUILDING
The grid collapses, it does not redesign. At max-width: 980px, twelve tracks become two. At max-width: 640px, they become one. The spans stop mattering — everything is full-width — but the gap and the padding persist. The layout's identity survives the breakpoint because the spacing scale is the identity, not the column count.
CONCLUSION
Grid is the brutalist's primary tool because it is the only layout system that is honest about its own structure. You see the tracks, you place within them, and the result is a layout that looks like what it is: a decision made visible. Use Grid, span asymmetrically, and let the empty tracks stay empty.