Responsive · 9 min · Sep 11, 2025

Adaptive Layouts for Foldables & Big Screens

Beyond breakpoints: posture, input modes, and multi-pane patterns.

Adaptive Layouts for Foldables & Big Screens

1. Adaptive vs Responsive

Adaptive vs Responsive

Responsive resizes; **adaptive** respects posture (folded/flat, split screen), input modes (touch, pen, kb/mouse), and task density. It’s about intent, not just breakpoints.

Key takeaways:
  • Posture & inputs
  • Task density
  • Layout intent

2. Container Queries & Sub-grid

Container Queries & Sub-grid

Build components that respond to their own container size with container queries. Use sub-grid so nested layouts keep a consistent rhythm.

Key takeaways:
  • cq-width
  • Nested grids
  • Auto-fit tracks

3. Multi-Pane Patterns

Multi-Pane Patterns

On large screens and foldables, adopt multi-pane navigation and resizable panels. Persist preferences so the app remembers the user’s layout.

Key takeaways:
  • Split view
  • Master-detail
  • Drag/resize zones

4. Typography, Density & Flow

Typography, Density & Flow

Use `clamp()` for fluid type/spacing. Keep 45–75 characters per line; extra width should add **columns** or **panes**, not stretch a paragraph to the horizon.

Key takeaways:
  • clamp() scales
  • Readable line length
  • Tokenized spacing

5. QA Matrix & Edge Cases

QA Matrix & Edge Cases

Test split view on foldables, RTL languages, and browser zoom at 125–150%. These are where overflow and clipping bugs appear.

Key takeaways:
  • Split-screen
  • RTL
  • Zoom 125–150%

6. Implementation Checklist

Implementation Checklist

Account for safe-area insets, adjust hit targets for touch vs mouse, and expose keyboard shortcuts where appropriate. Adaptive design is empathy at layout scale.

Key takeaways:
  • Input-mode queries
  • Safe areas
  • Hit targets