材料.用户界面网格系统.每行限制2项

Question

是否有方法将网格项限制为每行2项，并使每一行中的项占用所有可用空间？我使用的是ReactJS和MaterialUI核心。

这是主网格：

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

Answer 1

我认为您需要使用网格属性=> xs、sm、md、lg和xl。允许根据屏幕大小创建列大小。

我用您的例子做了一个stackblitz：https://stackblitz.com/edit/react-boilerplate-scalabw-cc3zyh?file=index.js

Answer 2

材料用户界面的网格系统给了你准确的答案。

一般的想法是，您的工作区(屏幕的宽度)被划分为12列/容器，每个子容器最多可以消耗它的父容器的%。您可以使用12/X类系统来决定列的宽度，因此，如果您想使用2-拆分，可以使用6 | 6，如果您希望使用6-拆分，则可以使用2 | 2 | 2 | 2 | 2 | 2，也可以使用其他数字(例如，您可以使用6 | 3 | 3或4 | 1 | 1 | 4 | 2 )。只要你得到12块钱--你们都很好。

您可以使用5个网格断点：xs、sm、md、lg、xl，当您需要针对不同屏幕大小进行不同布局时，它们提供了更大的灵活性：

600px

• md
• xs -默认
• sm-最小宽度1280px
• xl -最小宽度1920px

这个系统为您提供了设置网格的灵活性，在小屏幕上有2列，在大屏幕上有4列，在超大屏幕上，所有6项都在1行中可用：

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

使用该系统创建其他布局也很容易，例如，如果您需要2:10拆分(用于左侧菜单)，则可以使用：

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