Material-UI网格系统-每行限制2个项目 [英] Material-UI Grid System - limit 2 items per row
本文介绍了Material-UI网格系统-每行限制2个项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以将网格项目限制为每行2个,并使每行中的项目占用所有可用空间?我正在使用ReactJS和MaterialUI Core.
Is there a way to limit grid items to 2 per row and make the items in each row to take up all available space? I'm using ReactJS and MaterialUI Core.
这是主网格:
<Grid
container
direction="row"
alignContent="center"
alignItems="center"
wrap="wrap"
>
<Grid item className={classes.cardDesign}>
{showTags ? <Tags /> : null}
</Grid>
<Grid item className={classes.cardDesign}>
{showReactions ? <Reactions /> : null}
</Grid>
<Grid item className={classes.cardDesign}>
{showEmojiStats ? <EmojiStats /> : null}
</Grid>
<Grid item className={classes.cardDesign}>
{showFilter ? <Filter /> : null}
</Grid>
</Grid>
这些是网格项:
<div className={classes.root}>
<Card className={classes.cardDesign}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
Filters
</Typography>
<Typography variant="h5" component="h2">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
<Typography variant="body2" component="p">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</div>
推荐答案
我认为您需要使用Grid属性=> xs,sm,md,lg和xl.允许根据屏幕大小创建列大小.
I think you need to use the Grid property => xs, sm, md, lg, and xl. which allow to create column size depending on the screen size.
我用你的例子进行了一次闪电战: https://stackblitz.com/edit/react-boilerplate-scalabw-cc3zyh?file = index.js
I made a stackblitz with your example: https://stackblitz.com/edit/react-boilerplate-scalabw-cc3zyh?file=index.js
这篇关于Material-UI网格系统-每行限制2个项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文