The Ultimate Guide to Setting Material-UI Grid Item Height

The goal of this demo is to achieve equal item heights and masonry-style item wrapping in Material-UI’s Grid. This guide focuses on two things:

• Stretch all items in a Material-UI Grid row to be the same height.
• Achieve a “masonry-style” layout where shorter and narrower items can wrap in a column when vertical space allows

The first is simple to accomplish, requiring only a well-placed height: “100%” . The masonry wrapping is far more manual. Let’s dive in.

The code in this article can be found in this Codesandbox. Open the Codesandbox output in its own window in order to see the ‘lg’ size layout.

Here’s a comparison of Material-UI Grid component with Bootstrap and CSS Grid.

Vertical stretch

Getting all grid items in a row to adjust their height to match the tallest grid item has one quirk: It’s not really the grid that needs to have height set, it’s the items in each grid cell.

Notice in the above image that dev tools shows that the div (<Grid item/> ) is vertically expanding to fill available space. However, the item inside is not taking all the vertical space.

<Grid item md={6} xs={12} className={`${classes.gridItem}`}>
  <Paper style={{height: '100%'}}>Top/Left</Paper>
</Grid>

This does the trick. In the Codesandbox, the height is set via a class named paper instead of inline styling.

Masonry Grid Layout

If you are unfamiliar with Masonry layout, take a look at this great library with example images.

MUI’s grid uses a breakpoint concept like bootstrap; in my grid I use lg, md, and xs for my breakpoints. Please take a look at this deeper dive into how Material-UI’s grid works if you are unfamiliar with it.

In my example, the masonry effect is visible in the stacking of two cells that wrap at the medium (md) breakpoint.

Unfortunately, achieving this is very manual for two reasons:

• I had to wrap the ‘Shared’ cells in a <Grid> component
• I had to manually figure out exactly what the padding should be to ensure an even look

Here’s the code showing the wrapper <Grid> around the inner <Grid> shared cells.

<Grid item container md={6} xs={12} className={classes.gridItem}>
  <Grid
    item
    lg={6}
    md={12}
    xs={6}
    className={`${classes.masonryItemFirst}`}
  >
    <Paper className={classes.paper}>Shared</Paper>
  </Grid>
  <Grid
    item
    lg={6}
    md={12}
    xs={6}
    className={`${classes.masonryItemSecond}`}
  >
    <Paper className={classes.paper}>Shared</Paper>
  </Grid>
</Grid>

The outer <Grid> needs breakpoints that fit in with the sibling <Grid> components (Top/Left and Bottom in the image). Then inside this, I set breakpoints for each of the children <Grid> components according to my design.

You’ve seen the md image, below are lg and xs.

The padding was more challenging:

masonryItemFirst: {
  boxSizing: "border-box",
  padding: `0 ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px`,
  [theme.breakpoints.up("lg")]: {
    padding: `0px ${theme.spacing(1)}px 0px 0px`
  },
  [theme.breakpoints.down("sm")]: {
    padding: `0px ${theme.spacing(1)}px 0px 0px`
  }
},
masonryItemSecond: {
  boxSizing: "border-box",
  padding: `${theme.spacing(1)}px ${theme.spacing(1)}px 0px ${theme.spacing(1)}px`,
  [theme.breakpoints.up("lg")]: {
    padding: `0px 0px 0px ${theme.spacing(1)}px`
  },
  [theme.breakpoints.down("sm")]: {
    padding: `0px 0px 0px ${theme.spacing(1)}px`
  }
}

These two classes were applied to the first and second ‘Shared’ <Grid> components, respectively.

At the different breakpoints, you need padding at different sides in order to keep the appearance of the Shared cells the same as the other cells. For example, at lg I wanted padding between the shared cells, but not on the top or outsides. This is because the top and outside padding was taken care of by the parent <Grid>.

However, this was all a good exercise in using theme.breakpoints. This is a useful built-in function in the theme in Material-UI that can be used as a styling if-statement.

Wrap-Up (pun intended)

If you want a truly dynamic masonry-style grid, you probably are better off using CSS Grid or one of the masonry libraries. However, if you already use MUI and are willing to work through the calculations required to get a simple masonry-like effect, then it is certainly possible to achieve it for basic layouts.

Resources

Here’s how to set Grid container height and width.

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

Think you’re a JavaScript expert? Test yourself on these 50 difficult JavaScript questions.