Material-UI网格系统-每行限制2个项目 [英] Material-UI Grid System - limit 2 items per row

问题描述

是否可以将网格项目限制为每行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屋！