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

整页

页面缩小