嵌套网格 MUI 反应

Question

我正在尝试实现下图中显示的内容

到目前为止我有

<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

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

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>

用父容器的子容器 item 包装 AB 容器。

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>

嵌套网格 MUI 反应

Nested Grid MUI react

css

reactjs

grid

mui