css - 嵌套网格 MUI 反应

Question

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

到目前为止我有

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

但我的结果是这样的

A B
C

任何人都可以为我指明正确的方向以实现以下结果？

Answer 1

你需要这样做

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

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

Answer 2

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

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