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网格堆叠成行的更好方法是什么（如Bootstrap网格中的行类概念）？

我也考虑过这些选项：

- 用空的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

中使用它

检查Grid的official documentation可能也有用，因为它显示了一些使用它的方法，还链接到codesandbox.io上托管的每个exapmle，因此您可以自己玩它。

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

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

这是您可以采用的另一种方法，不需要两个网格容器。在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中（例如在Bootstrap中）查看语义Row和Column元素，但这不是它的工作原理。

Answer 4

您可以做这样的事情

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

如何将材料-ui Grid组织成行？

4 个答案: