javascript - 如何将 material-ui Grid 组织成行？

Question

我正在使用 ma​​terial-ui 做一个表单，使用 Grid 系统我想做以下事情:

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />
    <Grid item xs={4} />
</Grid>

并且能够将前两项放在第一行，将第三项放在第二行，我发现这样做的唯一方法是:

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />
</Grid>
<Grid container>
    <Grid item xs={4} />
</Grid>

将 ma​​terial-ui Grid 堆叠成行的更好方法是什么(就像 Bootstrap grid 中的行类概念)？

我也考虑过这些选项:

• 用空的 Grid 项目填充第一行？

• 放立式容器？

Answer 1

您已接近第二个代码块。

我发现您可以简单地创建 2 个不同的网格部分，例如:

<div>
  <Grid id="top-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 1</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 1</Paper>
    </Grid>
  </Grid>
  <Grid id="bottom-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 2</Paper>
    </Grid>
  </Grid>
</div>

您可以在我的 sandbox 中使用它

检查 official documentation 也可能有效对于 Grid，因为它展示了一些使用它的方法，并且还链接到托管在 codesandbox.io 上的每个示例，因此您可以自己使用它。

从文档来看，拥有多层网格系统的最佳方法似乎是定义整个网格的宽度，然后定义每个单元格的宽度，因为这会将系列后面的单元格推到另一个单元格上行。