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

IMG
sample_01.tif
IMG
sample_02.tif
IMG
sample_03.tif
IMG
sample_04.tif

Usage