如何将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 项填充第一行？

• 放垂直容器？

Answer 1

这是您可以采用的另一种方法，它不需要需要两个网格容器。在 Material UI 中，您可以通过使用一行有 12 列的事实并利用空网格项（如 Material UI does not support offset grid items）将网格组织成行，例如

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

你可以看到这个工作here。

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

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

Answer 2

我创建了新组件来解决这个问题：

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

那么您的代码将如下所示：

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

Answer 3

你可以这样做

<Grid container spacing={1}>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
</Grid>

Answer 4

你已经接近第二个代码块了。

我发现您可以简单地创建 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玩它

查看 Grid 的 official documentation 也可能是可行的，因为它显示了一些使用它的方法，并且还链接到 codeandbox.io 上托管的每个示例，因此您可以自己玩。

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