Layout / The visual dictionary
Adaptive layout.
A layout that changes structure to suit a different environment.
Also calledadaptive interfaceadaptive design
01
UI illustrationSee it in context
⌂ ▤ ◉
02
What it is
A layout that changes structure to suit a different environment. Switch between suitable compositions such as side-by-side panes and sequential screens while preserving task state.
When to use it
Use it when merely shrinking the current arrangement would hurt usability.
Know the difference
Adaptive changes may replace a component; responsive sizing often keeps the same structure.
03
Across platforms
WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS
Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS
A tablet sidebar may become phone tabs, while TV and watch interfaces need distinct input and density choices.
04
Go to the source
Primary documentation for the pattern and its platform conventions.