Material-UI Grid System - limit 2 items per row

问题

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.

This is the main grid:

<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>

And these are the grid items:

<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>

回答1:

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.

I made a stackblitz with your example: https://stackblitz.com/edit/react-boilerplate-scalabw-cc3zyh?file=index.js

回答2:

The Grid system of Material-UI gives you exactly that.

The general idea is that your workspace (the width of the screen) is divided into 12 columns/containers, and each child can consume up to % of it's parent container. You can decide on the width of the columns using a 12/X system of classes, so if you want a 2-split you can use 6 | 6, if you prefer to have a 6-split you can use 2 | 2 | 2 | 2 | 2 | 2, and you can also play with other numbers (for example you can have 6 | 3 | 3 or 4 | 1 | 1 | 4 | 2. As longs as the sum gets you 12 - you are all good.

There are 5 grid breakpoints that you can use: xs, sm, md, lg, xl, they give you more flexibility when you need to have different layouts for different screen sizes:

xs - default
sm - min width 600px
md - min width 960px
lg - min width 1280px
xl - min width 1920px

This system gives you the flexibility you set a grid that on small screen has 2 columns and on large screens have 4 columns, and on extra-large screens will have all 6 items available in 1 row:

<Grid container>
    <Grid item xs={6} lg={3} xl={2}>...</Grid>
    <Grid item xs={6} lg={3} xl={2}>...</Grid>
    <Grid item xs={6} lg={3} xl={2}>...</Grid>
    <Grid item xs={6} lg={3} xl={2}>...</Grid>
    <Grid item xs={6} lg={3} xl={2}>...</Grid>
    <Grid item xs={6} lg={3} xl={2}>...</Grid>
</Grid>

It's also easy to create other layouts using this system, for example if you need a 2:10 split (for a left-side menu) you can use:

<Grid container>
    <Grid item xs={2}>...</Grid>
    <Grid item xs={10}>...</Grid>
</Grid>

来源：https://stackoverflow.com/questions/61815605/material-ui-grid-system-limit-2-items-per-row

标签

reactjs

material-ui