Material 3

Layout

Scaffold first: bars frame the body, all content lives in a pane, and the grid reflows at compact / medium / expanded / large / extra-large. Bottom navigation stays — no rail in this pass.

Parts of layout

Window: The browser viewport. Layout follows window width, not a device name.
Bars: Top chrome (session, dates, filters) and the bottom navigation bar. They frame #main.
Body: #main between the bars. Horizontal inset is --wod-page-margin.
Pane: .wod-pane — every page’s content grouping. Narrow reading uses .wod-pane--narrow (--wod-pane-max, 840dp).
Column · gutter · margin: --wod-layout-columns, --wod-layout-gutter, --wod-page-margin. Rulers keep chrome and body aligned to --wod-body-max (1200dp).
Spacer: Gap between co-planar panes: --wod-pane-spacer.
Rails · drag handles: Not adopted. Navigation stays a bottom bar at every breakpoint; panes are not user-resizable.

Breakpoints

Material now calls these breakpoints (formerly window size classes). Adaptive layout reflows column and pane count, and resizes margins — it does not stretch a single compact layout.

Class Width Columns Margin Adaptive

Micro ≤ 370 4 12dp 1 pane · 1 card (min viewport)

Compact < 600 4 16dp 1 pane · 1 card

Medium 600–839 8 24dp 1 pane · 2 cards

Expanded 840–1199 12 24dp 2 panes · 3 cards

Large 1200–1599 12 24dp 2 panes · 4 cards

Extra-large ≥ 1600 12 32dp 2 panes · 4 cards

Column grid

Live count is --wod-layout-columns. Resize the window to see 4 → 8 → 12.

Canonical layouts in use

Feed Events and places listings. --wod-feed-columns is 1 / 2 / 3 / 4 by breakpoint.
List–detail (two pane) /plan stacks Ideas and Your stay on compact/medium, then shows them co-planar from expanded (840dp) with .wod-layout--panes.
Supporting pane /near-me (full page only) shows the map and results list together from expanded (840dp). Compact and medium keep Map / List as a segmented toggle. The homepage Near Me module stays list-first.
Single pane Passport, badges, accessibility, image use, submit, and other reading pages use .wod-pane--narrow.

First pane

Stacks below expanded; sits start-side from 840dp.

Second pane

Wider column on expanded+ (list–detail).

Spacing scale

Touch targets are 48dp; outlined fields are 56dp; date-picker days are 40dp. Bidirectionality: new layout uses padding-inline / margin-inline so RTL mirrors.