demo · v132

Four CSS strategies that degrade well

Posture is the future. Most devices today aren't foldable. Your layout has to do something useful when the media query never matches. Here are four patterns that work in both worlds — with the trade-offs each one makes.

strategy 1

Stack & reflow

.layout { display: grid;
  grid-template: 1fr / 1fr; }
@media (device-posture: folded) {
  .layout {
    grid-template: 1fr 1fr / 1fr; }
}
strategy 2

Side-by-side split

.layout { display: grid;
  grid-template: 1fr / 1fr; }
@media (device-posture: folded)
  and (orientation: landscape) {
  .layout {
    grid-template: 1fr / 1fr 1fr; }
}
strategy 3

Hinge-spanning gap

@media (device-posture: folded) {
  .layout {
    display: grid;
    grid-template-columns:
      1fr env(viewport-segment-width 0 0)
      1fr;
  }
}
strategy 4

Container queries (no posture)

.layout { container-type: inline-size; }
@container (min-width: 600px) {
  .panel { grid-template: 1fr / 1fr 1fr; }
}

when each one wins

scenariowinning strategy
Reading app on Surface Duo, single column1 — stack
Email app with list + preview pane on a fold2 — side-by-side
Map app that should leave a gap so nothing is under the hinge3 — hinge-spanning
Cross-platform layout that should also work on tablet, iPad, desktop4 — container queries (no posture)
Game where the controls go on the bottom screen of a fold2 + 3 combo — segments via env() with side-by-side fallback

see also

scenario focus

Select a scenario to focus its rendered example and summary.