Material-UI Grid Item height

Question

I have a row with multiple items and I want the height of all the items to equal the height of the tallest item, I basically want all the items to be the same height for this grid.

<Grid container layout={'row'} spacing={8}>
      <Grid item className={classes.section} xs={12} sm={12} md={4} lg={4} xl={4}>
        <div className={classes.teamMemberName}>
          {name}
        </div>
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <FirstTimeFillRate fillRate={firstTimeFillRate} />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <BackOrders
          backOrdersByItem={backOrdersByItem}
          backOrdersStoresWait={backOrdersStoresWait}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <OrderVolume orderVolume={orderVolume} />
      </Grid>

      <Grid item xs={12} sm={12} md={8} lg={8} xl={8} className={classes.section}>
        <Inventory inventory={inventory} />
      </Grid>
    </Grid>

The section class has a background color of gray and I can see that the sections do not inherit the height of the row as can be seen in this sandbox: https://codesandbox.io/s/1826lw51z3

Answer 1

2022 Update (Material UI v5):

Material UI v5 now relies on the CSS grid. Check out the official documentation here of the component, coming from MUI System https://mui.com/system/grid.

With this setup, you can set display: "grid", gridTemplateColumns: "repeat(5, 1fr)" on the container Box element to render 5 grid items with the same width and height. See an example with both fixed and variable number of columns here: https://codesandbox.io/s/black-river-3i2ub?file=/src/GridDemo.tsx

// Fixed number of columns
const gridContainer = {
  display: "grid",
  gridTemplateColumns: "repeat(5, 1fr)"
};

// Variable number of columns
const gridContainer2 = {
  display: "grid",
  gridAutoColumns: "1fr",
  gridAutoFlow: "column"
};

const gridItem = {
  margin: "8px",
  border: "1px solid red"
};

export default function GridDemo() {
  return (
    <Box sx={gridContainer}>
      <Box sx={gridItem}>Item #1</Box>
      <Box sx={gridItem}>Item #2</Box>
      <Box sx={gridItem}>Item #3</Box>
      <Box sx={gridItem}>
        Item #4 has a long text inside. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Box>
      <Box sx={gridItem}>Item #5</Box>
    </Box>
  );
}

Old answer (Material UI v1):

Simply apply height: 100% to the children of Grid items. In the code you have provided in the sandbox, add this property to the section class:

const section = {
  height: "100%",
  paddingTop: 5,
  backgroundColor: "#fff"
};

Please note that the code sample in your question is different from the sandbox, so the JSX should look like this:

<Grid item xs={12} md={4}>
  <div style={section}>component</div>
</Grid>

Here's the updated sandbox with a working demo: https://codesandbox.io/s/m7r7jnzzlx (no longer compiles as of 2022-01-10)

Answer 2

I think just setting {{alignItems="stretch"}} in the Grid container will do what you want? (It makes all items the height of the container, when direction="row").

Answer 3

When placed inside a <Grid container>, all <Grid item> are aumatically of same height in the same row. It is just that material ui uses an extra wrapper to create gap like the bootstrap does in their flexbox grid system. So a quicker solution can be keeping all your childrens of <Grid item> within a wrapper <div> and set it's height to 100%.

example code

<Grid container layout={'row'} spacing={8}>
                <Grid item xs={12} sm={12} md={4} lg={4} xl={4}>
                    <div style={{border: '1px solid', height: '100%'}}>
                        name
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={4} lg={4} xl={4} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={4} lg={4} xl={4} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, accusantium.
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={4} lg={4} xl={4} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam facilis tempore explicabo aperiam eveniet sit cumque dignissimos eius architecto quisquam.
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={8} lg={8} xl={8} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name
                    </div>
                </Grid>
            </Grid>

the result of the example code [1]: https://i.stack.imgur.com/uI6vr.png