Material-UI Grid Item height - material-ui

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 (MUI v5):
MUI v5 now relies on the CSS grid. Check out the official documentation here: 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 (MUI 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").