Material UI GridTile height

Question

I'm currently working with material ui and I'm running into an issue with GridLists. I have a GridList with multiple GridTiles and I don't see any way to change the height of each GridList separately. We are provided a prop for GridLists that let us specify the GridList cellHeight, but not for individual GridTiles. Does anyone know of a way to accomplish this?

GriList entry on material ui site Material Ui Grid List

I currently have the following (which does not work).

<GridList style={gridListStyle}>
    <GridTile style={gridStyle1} titlePosition="bottom">
        <div>
            stuff
        </div>
    </GridTile>
    <GridTile style={gridStyle2}>
        <div>
           junk
        </div>
    </GridTile>
</GridList>

Answer 1

While not an ideal solution, I ended up overriding the height of the GridTile component by adding 100% height !important. This allowed me to set the height to exactly what I needed.

  var gridTileStyle= {
      position: 'relative',
      float: 'left',
      width: '100%',
      minHeight: '400px',
      minWidth: '664px',
      overflow: 'hidden',
      height: '100% !important'
}

This allowed the component to dynamically resize in the window as the page got smaller, without the GridTile underneathe it overlapping it. Hopefully this helps someone else in the future.

Answer 2

You can also add some flex styling, which could help you with spacing your Tiles appropriately; for examples of flex settings available in Material-UI see https://material-ui.com/layout/grid/ (don't stop just because you see grid - I've successfully implemented these properties in a GridList too!).

Answer 3

Setting minHeight: '100vh' helped me to get a grid element to height of 100%. I tried all other elements and variants and did not help.