3.7 · Layout

Magazine Multi-
Column Layout.

3-column grid: vertical-text left rail, 2-column article body with drop cap and pull-quotes, sticky meta sidebar on the right. Long-form journalism layout.

What it is

Where chapter 1.11 covered the editorial aesthetic, this entry is about the layout mechanics: a 3-track outer grid (narrow left rail · main column · sticky sidebar), with the body text itself split into 2 CSS columns. The left rail uses vertical text for issue and date, the right rail holds a sticky table of contents and share row. Used by Bloomberg Businessweek, Wired long-reads, The Atlantic, and the Apple Newsroom feature pages.

How it works

Outer container uses CSS Grid: grid-template-columns: 64px 1fr 220px. The left rail uses writing-mode: vertical-rl; transform: rotate(180deg) so text reads bottom-to-top — pure print homage. The center article uses CSS columns: 2 with a hairline column-rule. Drop cap on the lead paragraph via p.lead::first-letter. Pull-quotes use break-inside: avoid so they never split across columns. The right sidebar is position: sticky; top: 24px so the ToC and share row follow the reader down the page.

writing-mode: vertical-rlRotates text 90° — vertical issue/date on the left rail
columns + column-ruleCSS multi-column with a hairline divider — print signature
break-inside: avoidPull-quotes stay intact, never split across columns
position: stickyRight sidebar follows the reader scroll — ToC stays in reach

Live demo

Scroll inside. Vertical-text rail on the left, 2-column body in the middle, sticky ToC on the right.

Live · scroll inside
Vol. 04 Issue 24 May 2026
★ Feature — Long Read

The slow web is winning.

Why the internet's most influential publishers are quietly going back to print habits — and what it teaches the rest of us about attention.

Most things you wait for are not worth the wait. A small minority are. The whole project of design is learning to tell which is which, then having the courage to build for the second category even when the first one pays the rent.

This is an essay about patience. Not the patience of the customer, who is paid for their wait in product. The patience of the maker, who is paid for their wait in nothing but the chance to put a better thing into the world.

The best interface is the one that never asks to be remembered.

The longer I work in this industry, the more I believe the best work I have done has been the work nobody talks about. The friction removed. The dialog deleted. The modal that never had to ship.

We celebrate the wrong things, partly because the wrong things are easier to point at. A redesign with a big visual change is easier to celebrate than a redesign that simply made everyone faster. A new feature is easier to ship than a setting deleted.

The interesting thing is that this idea is older than software. The same instinct that makes a great butler invisible at a dinner party makes a great tool invisible during a workflow. The cleaner the friction, the harder the work behind it.

How do you measure something a user did not notice? Not by impressions. Not by clicks. By time spent in the part of the product that matters — and the speed at which they return to it without being prompted. By retention curves that go flat for the right reasons, not the wrong ones.

This is harder to chart than a "new feature shipped" graph. But it is what differentiates products that last from products that win a season.

Build the thing. Test the thing. Strip the thing. Test it again. Ship it without telling anyone. If they notice, you've already done too much. If they don't — but they keep coming back — you've done the work.

Copy this prompt

Prompt · 3.7 Magazine Multi-Column
Build a magazine long-form article layout. Outer container: CSS Grid with grid-template-columns: 64px 1fr 220px and 28px gap. Left rail: position:sticky top:24px, writing-mode:vertical-rl, transform:rotate(180deg) so issue / date text runs vertically bottom-to-top. Middle column (max-width 720px): an all-caps deep-red eyebrow (★ Feature), serif headline (Georgia or Fraunces, 700 weight, italic axis mix), an italic deck/standfirst paragraph, a byline row with hairline top+bottom borders, then the body in CSS columns:2 with column-gap:28px and column-rule:1px solid rgba(0,0,0,0.16). First paragraph gets a drop cap via p.lead::first-letter (72px, float:left, deep-red). Add a pull-quote with break-inside:avoid, hairline top/bottom rules, italic serif at 21px. Justify body text with hyphens:auto. Right rail: position:sticky top:24px, white card with a table-of-contents list and a 4-icon share row. On mobile collapse to single column and hide the vertical rail.

Example sites to study