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