Addon · golden-grid
A page with no axis, only a progression.
Four tracks of unequal width, from the recursive subdivision of the golden ratio, summing to exactly 1 — and margins worth φ⁻⁶ of the page. An element never declares a width: it declares the role it plays, and the track hands it its measure.
The grid, live
What follows is a real golden grid, built from the classes the component emits. Toggle the tracing, force the single-column fallback, drag the gap along this site’s own scale — the four fractions never move.
margin
margin
01The derivation
The whole page is 1. Apply the golden cut to it, then cut each of the two parts by the same ratio. The four tracks are not four chosen numbers: they are the four leaves of a two-level tree.
The identity that lands the sum on 1 is the recurrence φⁿ = φⁿ⁺¹ + φⁿ⁺². Rounded to three decimals it still holds: 0.236 + 0.146 + 0.382 + 0.236 = 1.000 — which is what allows the values to be written as they are in the stylesheet, without losing anything.
02The roles
An element never declares a width. It declares the role it plays in the page, and the matching track hands it its measure. The rail carries metadata and butts right against the void; the shoulder stays empty, and it is what throws the page off-axis; the text track holds the reading measure; the spill is where images run off to the right.
This paragraph sits on the φ⁻² track — about 53 characters a line, with no max-width: 65ch anywhere. The measure is not set, it is derived: if the page grows, it grows in the same ratio.
03The void
The shoulder is a declared, drawn, measurable track. It cannot be reclaimed by content that overflows, because no class targets it on its own. The background tracing marks it one notch stronger than the rest — it is a piece of the drawing, not a development guide.
04The margin
The margins are golden too: φ⁻⁶ of the page, that is 5.6%. Not a step of the scale, a share — so they stay golden at every width, and grow with the window.
Two units live side by side, and that is the key: the margin is a share of the page, the tracks are shares of the composition. The “1” of the golden ratio is not the window, it is what the margins and the gaps leave. A single declaration holds both regimes — max(5.6%, calc((100% − 1440px) / 2)): golden share while the page is narrow, centring beyond.
The gaps, on the other hand, stay on the scale. There are five of them: at the next term of the series they would take 403px out of 1440 and empty the composition. A gap is not a division of the page, it is the air between tracks.
05The spill
The plate above starts on the left edge of the text column and runs to the page edge. The alignment breaks on one side only: that is what gives the movement without losing the reading anchor.
Alignment check · live
·· share of the page — the others, of the composition.
Two widths
Odd cards run from the rail to the shoulder, even ones from the text to the spill. The line of thumbnails is never straight.
The cut itself
Sitting on the golden cut, the two cards of a row have unequal widths — and it is the system that decides, not a setting.
No media query
Each card can become a query container and switch EVA’s fluid unit onto its own width instead of the viewport.
One caveat
container-type isolates CSS counters: a card number has to come from the template, not from a counter-increment.
06The fallback
Below the switch point, every named line collapses onto the two edges of the single track. No placement rule is rewritten: the rail, the text and the wide blocks all keep resolving, and they all resolve to the same column. Adding a block therefore never means writing its mobile counterpart.
07Turning it on
The component is loaded neither by core nor by variables, and the main entry emits no rule until it is switched on: a golden grid is a layout stance, not a sensible default.
// styles/main.scss @use 'eva-css-fluid' with ( $sizes: (4, 8, 12, 16, 20, 32, 52, 84, 136, 220), $golden-grid: true, $golden-grid-prefix: 'gg-', // recommended $golden-grid-column-gap: var(--20) ); <!-- html: a role, never a width --> <div class="gg-golden-grid"> <div class="gg-blocks"> <h2 class="gg-rail">Method</h2> <p>Text falls onto the reading measure.</p> <img class="gg-spill" src="…" alt=""> </div> </div>
08The rule
Every container starts and ends on a grid line. No width in ch, none in pixels, no margin: auto. The track is the measure; inline content flows inside it.
That rule is only worth something because it is checkable — the instrument above measures it on this very page, at every resize.
The whole component, documented.
Named lines, placement classes, the twelve options, the runtime gap tokens, the subgrid editorial flow and the single-column re-mapping. The full chapter.
Read the documentation →