javascript 如何将 material-ui Grid 组织成行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50610049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to organize material-ui Grid into rows?
提问by Gregory Arouche
I'm using material-uito do a form, using the Gridsystem I'd like to do the following:
我正在使用material-ui做一个表单，使用Grid我想做的系统：
<Grid container>
<Grid item xs={4} />
<Grid item xs={4} />
<Grid item xs={4} />
</Grid>
And be able to put the first 2 items, on the first row and the third on a second row, the only way I found to do it is:
并且能够将前两个项目放在第一行，第三个放在第二行，我发现这样做的唯一方法是：
<Grid container>
<Grid item xs={4} />
<Grid item xs={4} />
</Grid>
<Grid container>
<Grid item xs={4} />
</Grid>
What is the better way to stack material-uiGridinto rows (like the row class concept in Bootstrapgrid)?
将material-ui堆叠Grid成行的更好方法是什么（例如Bootstrap网格中的行类概念）？
I also thought about these options:
我还考虑了这些选项：
filling the first row with empty
Griditem?putting vertical container?
用空
Grid项目填充第一行？放置垂直容器？
采纳答案by physicsboy
You are close with the second block of code.
您已经接近第二个代码块了。
I found that you could simply create 2 distinct Grid sections such as:
我发现您可以简单地创建 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>
You can play with it in my sandbox
你可以在我的沙箱里玩
It might also be work checking out the official documentationfor Grid, as it shows a few ways to use it and also links to each exapmle hosted on codesandbox.io so you can play with it yourself.
查看Grid的官方文档也可能有用，因为它展示了几种使用它的方法，并且还链接到托管在 codeandbox.io 上的每个示例，以便您可以自己使用它。
From the docs, it seems the best way to have multi-layered grid systems is to define the width of the overall grid and then to define the width of each cell, as this will push cells later in the series onto the other rows.
从文档来看，似乎拥有多层网格系统的最佳方法是定义整个网格的宽度，然后定义每个单元格的宽度，因为这会将系列中稍后的单元格推到其他行上。
回答by Ben Smith
Here's another approach you could take which does not require two grid containers. In Material UI you can organise a grid into rows by using the fact that a row has 12 columns and making use of empty grid items (as Material UI does not support offset grid items) e.g.
这是您可以采用的另一种方法，它不需要两个网格容器。在 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>
You can see this working here.
你可以在这里看到这个工作。
Indeed this is actually demonstrated on the Material UI websites (though without the offsets) here.
事实上，这实际上在 Material UI 网站上（尽管没有偏移量）here上进行了演示。
I admit though that I'd prefer to see semantic Row and Column elements in Material UI (e.g. like in Bootstrap), but this is not how it works.
我承认虽然我更喜欢在 Material UI 中看到语义行和列元素（例如在 Bootstrap 中），但这不是它的工作原理。
回答by Smruti Ranjan Rana
You can do something like this
你可以做这样的事情
<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>
