Skip to content

Grid List

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 GridList.

  • Breakfast
  • Tasty burger
  • Camera
  • Morning
  • Hats
  • Honey
  • Vegetables
  • Water plant
  • Mushrooms
  • Olive oil
  • Sea star
  • Bike
<GridList cellHeight={160} className={classes.gridList} cols={3}>
  {tileData.map(tile => (
    <GridListTile key={tile.img} cols={tile.cols || 1}>
      <img src={tile.img} alt={tile.title} />
    </GridListTile>
  ))}
</GridList>

Grid list with titlebars

This example demonstrates the use of the GridListTileBar to add an overlay to each GridListTile. The overlay can accommodate a title, subtitle and secondary action - in this example an IconButton.

  • December
  • Breakfast
    Breakfast
    by: jill111
  • Tasty burger
    Tasty burger
    by: director90
  • Camera
    Camera
    by: Danson67
  • Morning
    Morning
    by: fancycrave1
  • Hats
    Hats
    by: Hans
  • Honey
    Honey
    by: fancycravel
  • Vegetables
    Vegetables
    by: jill111
  • Water plant
    Water plant
    by: BkrmadtyaKarki
  • Mushrooms
    Mushrooms
    by: PublicDomainPictures
  • Olive oil
    Olive oil
    by: congerdesign
  • Sea star
    Sea star
    by: 821292
  • Bike
    Bike
    by: danfador
<GridList cellHeight={180} className={classes.gridList}>
  <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
    <ListSubheader component="div">December</ListSubheader>
  </GridListTile>
  {tileData.map(tile => (
    <GridListTile key={tile.img}>
      <img src={tile.img} alt={tile.title} />
      <GridListTileBar
        title={tile.title}
        subtitle={<span>by: {tile.author}</span>}
        actionIcon={
          <IconButton aria-label={`info about ${tile.title}`} className={classes.icon}>
            <InfoIcon />
          </IconButton>
        }
      />
    </GridListTile>
  ))}
</GridList>

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.

  • Breakfast
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike
<GridList className={classes.gridList} cols={2.5}>
  {tileData.map(tile => (
    <GridListTile key={tile.img}>
      <img src={tile.img} alt={tile.title} />
      <GridListTileBar
        title={tile.title}
        classes={{
          root: classes.titleBar,
          title: classes.title,
        }}
        actionIcon={
          <IconButton aria-label={`star ${tile.title}`}>
            <StarBorderIcon className={classes.title} />
          </IconButton>
        }
      />
    </GridListTile>
  ))}
</GridList>

Advanced Grid list

This example demonstrates "featured" tiles, using the rows and 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 titleBackground. The secondary action IconButton is positioned on the left.

  • Breakfast
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike