Layout / The visual dictionary

Container.

A bounded region that groups content and controls its available width.

Also calledwrappercontent container

See it in context

UI illustration

max-width

Aligned content

What it is

A bounded region that groups content and controls its available width. Set sensible width and internal spacing, and let the container resize with its parent.

When to use it

Use it to establish consistent content edges across sections.

Know the difference

A container groups children; a card adds a visible surface representing a distinct item.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

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

Web max-width containers and native layout guides serve similar purposes but use different measurement systems.

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 container. Set sensible width and internal spacing, and let the container resize with its parent. Use it to establish consistent content edges across sections. 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…

Padding

Margin

Content area