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.
Grid lists are best used on similar data types. They help improve the visual comprehension of the content they contain.
A simple example of a scrollable image
This example demonstrates the use of the
GridListTileBar to add an overlay to each
The overlay can accommodate a
subtitle and secondary action - in this example an
This example demonstrates "featured" tiles, using the
cols props to adjust the size of the tile, and the
padding prop to adjust the spacing.
The tiles have a customized titlebar, positioned at the top and with a custom gradient
The secondary action
IconButton is positioned on the left.
This example demonstrates a horizontal scrollable single-line grid list of images. Horizontally scrolling grid lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. One notable exception is a horizontally-scrolling, single-line grid list of images, such as a gallery.