MaterialUI - Indepdendent Grids next to each other?-CodePudding

I have a Grid container and two "sub-containers" each taking half the space of the parent grid. I want to stack items of different heights on each of the sub-containers, but I'm having a problem with one side's height affecting the other. The code is extremely simple:

<Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={3}>
        <Grid item container xs={6}>
          <Grid item xs={12}>
            <Item>Short items</Item>
          </Grid>
          <Grid item xs={12}>
            <Item>Short items</Item>
          </Grid>
          <Grid item xs={12}>
            <Item>Short items</Item>
          </Grid>
        </Grid>
        <Grid item container xs={6}>
          <Grid item xs={6}>
            <Item style={{ height: "450px" }}>Tall item</Item>
          </Grid>
        </Grid>
      </Grid>
    </Box>

And also a Codesandbox forked from the documentation's. The result I want is the items on the left stacking right on top of each other.

CodePudding user response：

You can add alignContent="baseline" to your left Grid container like:

<Grid item container xs={6} alignContent="baseline">

You can take a look at this sandbox for a live working example of this usage.