6. Breaking out of the column

Diagnostics

Three ways of escaping the reading column, measured live. Whichever of these behaves best decides how every component gets built from here.

measuring...

A. Normal width, for reference

This bar sits inside the column

B. Full bleed, pure CSS with 100vw

Edge to edge, no JavaScript. Watch for a horizontal scrollbar appearing.

C. Measured widening, capped at 1180px

Room to breathe

A three column grid needs about 700 pixels before it stops looking cramped.

Sidebar layouts

The rule explorer in lesson five wants roughly 900 to feel like a document rather than a phone.

Diagrams

Wide SVG schematics are the thing that suffers most inside a narrow measure.

Prose should stay narrow, since long lines are genuinely harder to read. Only components that need the room should take it, which is what option C is for.