Material-UI Grid, как применить ко всем ячейкам одинаковое пространство, даже если они находятся внутри другого контейнера

Question

Я новичок в CSS, Material-UI и пытаюсь использовать сетку, чтобы на моей странице были разные панели, но все они должны иметь одинаковое расстояние между ними. Кроме того, я хотел бы, чтобы они хорошо выглядели при изменении размера страницы.

    <Flex css={{ background: "purple", padding: "8px" }}>
      <Grid
        container
        justify={"space-between"}
        spacing={2}
        css={{ width: "100%", height: "100%" }}
      >
        <Grid item xs={12} sm={3}>
          <Paper css={{ height: "100%" }}>
            <Typography variant="h1">1</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper css={{ height: "100%" }}>
            <Typography variant="h1">2</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} sm={3}>
          <Grid
            container
            css={{ height: "100%" }}
            spacing={2}
            justify={"space-between"}
          >
            <Grid item xs={6} sm={12} css={{ minHeight: "50%" }}>
              <Paper css={{ height: "100%" }}>
                <Typography variant="h1">3</Typography>
              </Paper>
            </Grid>
            <Grid item xs={6} sm={12} css={{ minHeight: "50%" }}>
              <Paper css={{ height: "100%" }}>
                <Typography variant="h1">4</Typography>
              </Paper>
            </Grid>
          </Grid>
        </Grid>
        <Grid item xs={12}>
          <Paper css={{ height: "100%" }}>
            <Typography variant="h1">5</Typography>
          </Paper>
        </Grid>
      </Grid>
    </Flex>

И вот так выглядит коддалеко. Но панели 3 и 4 смещены, и пространство в нижней части панели 4 намного больше, чем у других. Я не знаю, как заставить его выглядеть правильно, я пробовал много свойств (align-items, align-content, justify и т. Д.) Без успеха

Полная страница

Сокращенная страница