如何将material-ui Grid组织成行？
如何将material-ui Grid组织成行？
提问于 2018-05-31 01:03:46
我正在使用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>将material-ui Grid堆叠成行的更好方法是什么(就像Bootstrap网格中的行类概念)？
我还考虑了这些选项：
- 用空的
Grid - 填充第一行垂直容器？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-31 17:01:19
您已经接近了第二段代码。
我发现您可以简单地创建两个截然不同的网格部分，例如：
<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，因为它展示了一些使用它的方法，还提供了到codesandbox.io上托管的每个exapmle的链接，以便您可以自己使用它。
从文档中看，拥有多层网格系统的最好方法似乎是定义整个网格的宽度，然后定义每个单元格的宽度，因为这会将序列中后面的单元格推到其他行上。
Stack Overflow用户
发布于 2019-12-04 18:53:42
这是你可以采用的另一种方法，它不需要两个网格容器。在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。
事实上，这实际上在材料UI网站(虽然没有偏移量) here上得到了演示。
我承认我更喜欢在实体UI中看到语义行和列元素(例如在Bootstrap中)，但这不是它的工作方式。
Stack Overflow用户
发布于 2020-03-29 12:26:34
你可以这样做
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50610049
复制相关文章
相似问题