Grid View

Grid view is a UI layout that presents a collection in scrollable rows and columns — best for image-focused collections and side-to-side scanning.

Compare with Lists (text-first rows) and Carousel (one item at a time).

Grid types

Type	Description
Column grid	Vertical columns; content aligned to columns
Modular grid	Columns + rows form modules; good for repeatable product rows
Hierarchical grid	Content sized by importance; largest modules for primary items

Grid item anatomy

1. File preview — thumbnail or icon
2. File name — below preview
3. Favourites — star icon
4. Versioning — small icon when applicable
5. Selection — checkbox or highlight when selected

Tiles view

Preview fills the tile; file name, favourites, and checkbox appear on hover or selection. Star stays visible when marked favourite.

Example

Usage

• Images, files, products, and media collections
• Quick multi-item scanning; select, move, and organize items
• Prefer grid for visual-heavy content; list for text-heavy detail
• Consider 8px grid alignment for gutters and margins