Content display / The visual dictionary
Collection view.
Items arranged in a flexible visual collection.
Also calleditem gridcollection grid
01
UI illustrationSee it in context
◈Design systems
AaTypography
▧Components
02
What it is
A collection view organizes comparable items in rows or a grid and can adapt the number of columns to available space. It works well for content whose image or shape aids recognition.
When to use it
Use for visual browsing across related items.
Know the difference
A collection view lays out items; a data grid organizes cells with tabular relationships.
03
Across platforms
WebiOSiPadOSAndroidmacOSWindowsLinuxtvOSAndroid TVvisionOS
iOS · iPadOS · macOS · tvOS · visionOS
Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.
Web · Android · Windows · Linux · Android TV
Use semantic content structures on the web. Touch, pointer, and remote layouts need different target spacing even when the same information is shown.
04
Go to the source
Primary documentation for the pattern and its platform conventions.