Mui React 网格系统

Question

我需要创建一个包含 2 行的布局，第一行是 66% 高度，第二行是 33% 但它不起作用，我需要将高度固定为 % 因为必须响应（至少在桌面上共同决议

我有这个，但是没用

<Stack direction='column' justifyContent='flex-start' alignItems='stretch' sx={{ height: '100%' }}>
  <Grid container spacing={1} sx={{ height: '60%' }}>
    <Grid item container xs={12} sm={5}>
      <Panel1/>
    </Grid>
    <Grid item container xs={12} sm={4}>
      <Panel2/>
    </Grid>
    <Grid item container xs={12} sm={3}>
      <Panel3/>
    </Grid>
  </Grid>
  <Grid container spacing={1}>
    <Grid item container xs={12} sm={5}>
      <Panel4 />
    </Grid>
    <Grid item container xs={12} sm={4}>
      <Panel5 />
    </Grid>
    <Grid item container xs={12} sm={3}>
      <Panel6 />
    </Grid>
  </Grid>
</Stack>

第二行不是 40%，第一行也不是 60%，并且没有响应（全高清或 768px）

像这样，但至少对全高清和 763px 有响应