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 (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)