Layout / The visual dictionary

Grid layout.

A structure that aligns content in rows and columns.

Also calledgridtile grid

See it in context

UI illustration

What it is

A structure that aligns content in rows and columns. Use consistent tracks, gaps, and alignment so repeated content is easy to scan.

When to use it

Use it for collections with comparable visual weight.

Know the difference

A grid aligns items in two dimensions; a stack arranges one sequence.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

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

CSS Grid suits web layouts; native collection layouts offer comparable structure with platform-specific sizing.

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 grid layout. Use consistent tracks, gaps, and alignment so repeated content is easy to scan. Use it for collections with comparable visual weight. 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…

Stack layout

Gutter

Card layout