Layout / The visual dictionary

Responsive layout.

A layout that adjusts smoothly to the space available.

Also calledfluid layoutresponsive design

See it in context

UI illustration

↔

Same content, fluid arrangement

What it is

A layout that adjusts smoothly to the space available. Allow content widths, wrapping, and spacing to respond to the current viewport without losing reading order.

When to use it

Use it wherever the same content appears in different window sizes.

Know the difference

Responsive often means fluid resizing; adaptive changes can replace the composition at thresholds.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Test assumptions against resizable windows and text scaling, not just a fixed list of device sizes.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a responsive layout. Allow content widths, wrapping, and spacing to respond to the current viewport without losing reading order. Use it wherever the same content appears in different window sizes. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Go to the source

You might also mean…

Adaptive layout

Breakpoint

Flex layout