Реакция вложенного Grid 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>
          <Grid item>
              A
          </Grid>
          <Grid item>
              B
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
          C
      </Grid>
    </Grid>

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

Обернуть AB контейнер другим item, который является дочерним по отношению к родительскому контейнеру.