如何在材質ui中為網格項添加新行？

Question

我將像這樣打破一行網格項目。 如您所見，網格的 rest 空間應該是空的。

<Grid container spacing={3}
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  // empty space
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

我應該使用內部grid container嗎？ 或者我應該使用display flex嗎？

Answer 1

我創建了新組件來解決這個問題：

export const GridBreak = styled.div`
  width: 100%
`;

然后您的代碼將如下所示：

<Grid container spacing={3}>
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  <GridBreak />
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

Answer 2

您可以只添加 8 的 xs 的空網格。像這樣：

<Grid container spacing={3}
  <Grid item xs={12}>
   "Grid Item xs={12}"
  </Grid>
 <Grid item xs={4}>
  "Grid Item xs={4}"
 </Grid>
 <Grid item xs={8}>
  // empty 
 </Grid>
 <Grid item xs={12}>
  "Grid Item xs={12}"
 </Grid>

Answer 3

我會添加<Box width="100%"/> ：

    <Grid container spacing={3}
      <Grid item xs={12}>
        "Grid Item xs={12}"
      </Grid>
      <Grid item xs={4}>
        "Grid Item xs={4}"
      </Grid>

      <Box width="100%"/> // empty space

      <Grid item xs={12}>
        "Grid Item xs={12}"
      </Grid>
    </Grid>