嵌套网格 MUI 反应答案

【问题标题】：Nested Grid MUI react嵌套网格 MUI 反应
【发布时间】：2020-08-06 13:00:35
【问题描述】：

我正在尝试实现如下图所示的目标

到现在为止

<Grid container justify=“space-between”>
    <Grid container item>
        <Grid item>
            A
        </Grid>
        <Grid item>
            B
        </Grid>
    </Grid>
    <Grid item>
        C
    </Grid>
</Grid>

但是我的结果是这样的

A B
C

谁能指出我正确的方向以实现以下结果？

【问题讨论】：

标签： css reactjs grid mui

【解决方案1】：

您必须在容器中包含一个项目

    <Grid container justify='space-between'>
      <Grid item>
        <Grid container>
          <Grid item>
              A
          </Grid>
          <Grid item>
              B
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
          C
      </Grid>
    </Grid>

【讨论】：

【解决方案2】：

你需要这样做

<Grid container justify="space-between">
  <Grid item>
    <Grid container item>
      <Grid item>
        A
      </Grid>
      <Grid item>
        B
      </Grid>
    </Grid>
  </Grid>
  <Grid item>
    C
  </Grid>
</Grid>

用另一个 item 包装 AB 容器，它是父容器的子容器。

【讨论】：