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

Question

我正在使用material-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>

将材料UI 堆叠Grid到行中的更好方法是什么（例如Bootstrap网格中的行类概念）？

我还考虑了以下选项：

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

• 把垂直容器？

Answer 1

您已经接近第二段代码了。

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

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

你可以在我的沙箱里玩

检查Grid 的官方文档也可能是一项工作，因为它显示了一些使用方法，并且还链接到了codeandbox.io上托管的每个示例，因此您可以自己使用它。

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

Answer 2

这是您可以采用的另一种方法，它不需要两个网格容器。在 Material UI 中，您可以通过一行有 12 列这一事实并利用空网格项（因为 Material UI不支持偏移网格项）将网格组织成行，例如

<Grid 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 item xs={4} />
    {/* 12 Columns used, so next grid items will be the next row  */}
    {/* This works because Material UI uses Flex Box and flex-wrap by default */}
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={8} />
  </Grid>

你可以在这里看到这个工作。

事实上，这实际上在 Material UI 网站上得到了演示（尽管没有偏移）。

我承认虽然我更喜欢在 Material UI 中看到语义行和列元素（例如在 Bootstrap 中），但这不是它的工作原理。