Skip to content

Components-Grid lists

Grid lists are an alternative to standard list views. A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout.

Types

  1. Image-only
  2. Single-line text (or with icon)
  3. Two-line text (or with icon)

Actions

  1. Vertical scrolling
  2. Filtering

Alternatives

  1. Lists
  2. Cards

Usage

A grid list is best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types.

A grid list consists of a repeated pattern of cells arrayed vertically and horizontally within the grid list. Tiles hold content and can span one or more cells vertically or horizontally.

CONS :

If the text in tiles needs to be prominent enough to distinguish between primary content pieces, consider using a different container, like a list or cards, optimized for displaying text and facilitating reading comprehension.

Lists: Optimized for reading comprehension, particularly when comparing a set of data containing multiple data types.

Cards: Used for content with inconsistent formatting, such as photos with captions of variable length, or data sets with heterogeneous content, such as a mixed collection of photos and videos and books.

CONTENT

Tile content consists of primary content and secondary content. Primary content is the main differentiating element, typically an image. Secondary content can be an action or text.

Provide a default image for tiles that lack an image for primary content.

Actions in tiles

Actions on both primary and secondary content – such as play, zoom in, delete, or select – are immediate and typically do not result in a submenu of options (action overflow) within the grid list.

Actions can open a subsequent view, such as a card.

Primary actions

  1. Fill the entire tile and therefore are not represented via icons or text
  2. Primary Actions Are consistent throughout tiles in a specific grid list. For example, the primary action for all tiles in a single grid list could be to view details for an image.

Secondary actions or content

  1. Are represented in tiles with icons or text
  3. Are consistent throughout tiles in a specific grid list
  4. Are placed in a consistent location within the tiles of a specific grid list, but that consistent location may vary between grid lists (at corners or edges).

Behaviour

Scrolling

Grid lists typically scroll only vertically.

Gestures

Per-tile swipe actions are not permitted. Pick-up-and-move actions are discouraged.

Tile filtering and sorting

Content in a grid list can be programmatically filtered or sorted by date, file size, alphabetical order, or other parameters. The first item in the grid list is positioned at the top left of the grid list, and the order proceeds left to right and top to bottom.

Dimensions and resizing

Resizing a grid list causes the tiles to re-sort as horizontal space becomes available. Full-bleed grid list tiles resize to fit the screen width.

A grid list does not transform into a list when horizontal space contracts. Grid lists and lists are separate structures for emphasizing different data types. Grid lists prioritize images over text and lists prioritize text over images.

Specs

For Specs click here.