Grid lists display a collection of images in an organized grid.
Grid lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.
Image-only Grid list
A simple example of a scrollable image
Grid list with titlebars
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
- Breakfastby: jill111
- Tasty burgerby: director90
- Cameraby: Danson67
- Morningby: fancycrave1
- Hatsby: Hans
- Honeyby: fancycravel
- Vegetablesby: jill111
- Water plantby: BkrmadtyaKarki
- Mushroomsby: PublicDomainPictures
- Olive oilby: congerdesign
- Sea starby: 821292
- Bikeby: danfador
Single line Grid list
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.
Advanced Grid list
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.