Refine By

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.

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

 

Related Elements

Version History

Date/Time of ChangeWho Made the ChangeChange Details