Grid List

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.

Image-only Grid list

To show this type of grid list you will need this code in down here.

     
<div className="gl-image">
    <GridList cellHeight={160} className="gl" cols={3}>
        {tileData.map((tile, index) =>
            <GridListTile key={index} cols={tile.cols || 1}>
                <img src={tile.img} alt={tile.title}/>
            </GridListTile>,
        )}
    </GridList>
</div>
  

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
cellHeight	union: number |  enum: 'auto'	180	Number of px for one cell height. You can set 'auto' if you want to let the children determine the height.
children *	node		Grid Tiles that will be in Grid List.
classes	object		Useful to extend the style applied to components.
cols	number	2	Number of columns.
component	union: string |  func	'ul'	The component used for the root node. Either a string to use a DOM element or a component.
spacing	number	4	Number of px for the spacing between tiles.