©2021 All Rights Reserved.

Grids

Contents:

Grids are an alternative way of presenting a list or collection of cards.
They consist of columns and rows of content arrayed in a repeatable pattern.
Grids are optimized for visual comprehension, while lists are preferred for reading comprehension.

Download UI Kit

Guidelines

Use a grid for an array of similar data types such as images or tiles.

If the text in the cells of a grid need to be prominent, use a list or cards instead.

Ensure the main distinguishing feature between cells in a grid is a primary element, such as an image.
Secondary elements can be a CTA, icon, or text.

Ensure compositional consistency across cells in a grid.

Order grid content in a logical and expected fashion.
Common sorting criteria are by date, alphabetical order, and price.

Interaction Points

Style

Accessibility

As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.

See Also

Further Reading

Material Design Guidelines – Grid Lists

Related Elements

Cards
Lists

Related Components

Version History

Date/Time of Change	Who Made the Change	Change Details