将 React Material UI Grid 与每列不同的行数对齐

Question

目标

我想创建一个包含有关设备、图标及其状态的信息的组件。 例子：

我试过的

我想通过创建一个看起来像 2x2 网格的 MUI Grid 来实现这一点，除了第一列由一个包含图标的单元格组成，它的高度为两个单元格。

问题

我可以使用 MUI Grid 获得三单元格布局，但我无法展开应该覆盖两行的单元格。 它目前是左上角的单元格，而不是覆盖左上角和左下角的单元格。 如果这不能通过 MUI Grid 实现，我很高兴听到其他建议。

代码

<div>
  <Grid container spacing={24}>
    <Grid item xs={6}>
      <Paper>Display a MUI Icon over two rows instead of one</Paper>
    </Grid>           
    <Grid item xs={6}>
      <Grid container spacing={24}>
        <Grid item xs={12}>
          <Paper>Top right</Paper>
        </Grid>
        <Grid item xs={12}>
          <Paper>Bottom right</Paper>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</div>

Answer 1

我会通过使用 Grid 和 Stack 来做到这一点。

        <Grid container sx={{ m: 1, p: 2 }}>
      <Grid item xs={6}>
        <Paper>Display a MUI Icon over two rows instead of one</Paper>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <Paper>Top right</Paper>
          <Paper>Bottom right</Paper>
        </Stack>
      </Grid>
    </Grid>

CodeSandBox 在这里。

Answer 2

我检查了您的代码，问题是您使用了两个不同的容器，但根据您的要求，您可以使用一个主容器，然后可以使用第二个容器。

我为你做了一个演示。

<div className="App">
  <Grid container sx={{ m: 1, p: 2 }}>
    <Grid
      item
      xs={6}
      style={{
        backgroundColor: "red",
        display: "flex",
        alignItems: "center"
      }}
    >
      Display a MUI Icon over two rows instead of one
    </Grid>
    <Grid item xs={6} style={{ backgroundColor: "green" }}>
      <Grid container direction="column">
        <Grid item>Top right</Grid>
        <br />
        <br />
        <Grid item>Bottom right</Grid>
      </Grid>
    </Grid>
  </Grid>
</div>