Breakout

A page of prose is held to a measure, because text is only comfortable at somewhere around 45 to 75 characters a line. A figure, a diagram, a wide table and a block of code are not text, and that same width starves them. A breakout is the answer stated as layout rather than as an exception: the container declares a second, wider track beside the reading one, and an element that needs the extra room asks for it by name. The width is decided once, for the page, so every wide figure on the site lines up with every other one.

The modern recipe is a named-line grid, which is why the technique arrived with CSS Grid rather than with negative margins. The page declares its lines from the outside in, [full-start] 1fr [breakout-start] 1fr [content-start] min(60ch, 100%) [content-end] 1fr [breakout-end] 1fr [full-end], everything defaults to grid-column: content, and a figure opts out with grid-column: breakout. Nothing overflows and nothing is pulled sideways out of its box, which means no horizontal scrollbar to chase and no overflow: hidden needed to hide the mistake. It is the same structure a layout grid gives a whole product, applied to one article: a small set of tracks everybody aligns to, with the alignment names doing the talking. WordPress ships exactly this vocabulary to authors as wide alignment, alignwide in the markup, sitting between the default width and full width, and Ryan Mulligan’s layout breakouts is the reference write-up for the grid version.

The boundary worth being crisp about is the one against full bleed. A full-bleed element reaches both edges of the viewport, and the breakout deliberately does not: it stops short, keeping a margin of page on either side, which is what lets a wide figure read as part of the article rather than as an interruption of it. That intermediate step is the whole point, and it is also why the track has to be part of the page’s declared structure. It is unrelated to a safe area, despite both talking about how close to an edge content may come: a safe area is a hardware fact about notches and system bars that the device reports, while a breakout is an editorial decision about reading.

Two practical notes. On a narrow screen the breakout track has nowhere to go, so it clamps to the available width and a breakout figure ends up looking full bleed. That is correct behaviour rather than a bug, but it does mean the distinction only exists above a certain width, and it is worth checking that the collapsed version still looks deliberate. And resist adding more rungs than the page can use. Two extra tracks past the content column give a reader a rhythm they can learn, while five give them a page where nothing has a settled width.