Material UI 如何实现并排Grid子容器高度互不影响？

你遇到的布局问题根源是MUI Grid基于Flex布局实现，默认同层级的Flex项目会保持等高，所以右侧的高元素会把左侧容器的高度也拉到相同高度，而左侧Grid容器默认的交叉轴对齐方式会让内部元素分散排布，因此出现了多余空隙。

你只需要给左侧的Grid item container添加alignContent: 'flex-start'的样式配置即可实现左侧元素紧密堆叠的效果，修改后的代码如下：

<Box sx={{ flexGrow: 1 }}>
  <Grid container spacing={3}>
    {/* 左侧容器新增alignContent配置 */}
    <Grid item container xs={6} sx={{ alignContent: 'flex-start' }}>
      <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>

如果后续有更复杂的错落排布需求，也可以考虑使用CSS Grid的 masonry 布局方案，当前场景以上修改即可满足需求。

内容的提问来源于stack exchange，提问作者user1769106