reactjs - Material UI - 彼此相邻的独立网格？

Question

我有一个 Grid 容器和两个“子容器”，每个都占用父网格的一半空间。我想在每个子容器上堆叠不同高度的元素，但我遇到了一侧高度影响另一侧的问题。代码非常简单:

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

还有一个Codesandbox从文档中 fork 出来的。我想要的结果是左边的项目相互堆叠。

Answer 1

您可以将 alignContent="baseline" 添加到您的左侧 Grid 容器中，例如:

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

可以看看this sandbox有关此用法的实际工作示例。