css - 如何在 Material ui 中为网格项添加新行？

Question

我将像这样打破一行网格元素。

如您所见，网格的剩余空间应该是空的。

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