A track written 0.236fr is not 0.236 wide. That is the kind of detail golden-grid rests on, the layout component I have just published in eva-css-fluid 2.6.0.
A 12-column grid is a system of division. This one is a system of proportion, and the difference shows up in what you write.
Dividing or proportioning
In a grid of 12 equal columns, you take 4, 6 or 8 columns depending on what has to fit. The proportions are a result, never a decision. And since every column is worth the same, there are only two ways left to build a hierarchy: centre, or count.
golden-grid has four tracks of different, non-interchangeable widths, each with a function. The rail (φ⁻³, 0.236) carries metadata and aligns right. The shoulder (φ⁻⁴, 0.146) carries nothing: it is what throws the page off axis. The text track (φ⁻², 0.382) is the reading measure. The spill (φ⁻³, 0.236) is where images run off to the right. An element never declares a width: it declares the role it plays, and the track gives it its measure.
The page has a progression: three left edges instead of one middle, and the eye goes down following edges. Empty space is a value: the shoulder is a declared track, and no class targets it, so no content can take it back. The reading measure, finally, is deduced. Not a single max-width: 65ch in the stylesheet: it is 0.382 of the composition.
The margin is a share of the page
The margins are golden too, but on another unit: the margin is a share of the page, the tracks are shares of the composition. At 1440 px, two margins of 80.6 and five gaps of 24.1 leave 1158.2 of composition: rail 273, shoulder 169, text 442, spill 273.
Five gaps, and the series stops there
The gap is the air between the tracks, it belongs to the scale: there are only two margins, but five gaps, and I would rather have a formal inconsistency I own than a consistency that empties the composition. The arithmetic is in the EVA docs, along with the geometry of the tracks and the margin.
The inconsistency has no consequence, and that can be checked. column-gap is taken out before the fr are distributed: the four tracks share what is left, their ratios do not move. Pushing the gap from 4 px to 103 px in the browser, the composition goes from 1413 to 920 px and the fractions stay 0.2360 / 0.1460 / 0.3820 / 0.2360.
subgrid does the real work
grid-template-columns: subgrid inherits the tracks and their names: a block writes grid-column: rail without knowing anything about the page containing it. It is also the component’s real compatibility floor: Chrome 117, Safari 16, Firefox 71, everywhere since September 2023.
Two silent failures
The first one fits in two characters. A track written 0.236fr is really written minmax(auto, 0.236fr), and that automatic minimum is the min-content contribution of the content: an unbreakable URL in the rail widens the track and breaks the golden proportion. Nothing in the console, just a page that is no longer golden. So the component writes minmax(0, …) on its four tracks.
The second one is in the order of two selectors.
.blocks > * { grid-column: main; } // the flow default
.rail { grid-column: rail; } // the placement
These two selectors have the same specificity, 0,1,0. In that order, all is well. In the other one, the default overrides every placement class, and rail, wide blocks and spills fall back silently into the text column. The CSS is still valid, the page is still valid, the grid is not.
What it costs
Making the margins golden costs reading measure. It goes from about 60 to about 53 characters at 1440 px. That is still inside the comfortable range, between 45 and 75, but it is a trade-off.
The component is opt-in and emits no rule at all until you turn it on.
@use 'eva-css-fluid' with ($golden-grid: true);
Without Sass, dist/golden-grid.css weighs 2.1 kB and sits after eva.css, whose variables it consumes.
