demo · v132

Map + list reflow on the @media (device-posture) breakpoint

A canonical foldable layout: stacked map-over-list when continuous, side-by-side when the device is folded. The probe at the top shows the live MQ value. Buttons let you override the posture for testing on a non-foldable.

checking @media (device-posture)…
map
● 51.5074, -0.1278 — London
● 51.5155, -0.0922 — The City
● 51.5033, -0.1196 — Westminster
nearby
Foundry Coffee — 0.4 mi
Brick Lane Bagels — 0.6 mi
Borough Market — 0.9 mi
Tate Modern — 1.1 mi
@media (device-posture: folded) {
  .frame { grid-template-columns: 1fr 1fr; }
}

see also