reactjs - Material-UI 网格系统 - 每行限制 2 个项目

Question

有没有办法将网格项目限制为每行 2 个，并使每行中的项目占用所有可用空间？我正在使用 ReactJS 和 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>

Answer 1

Material-UI 的网格系统正是为您提供的。

总体思路是，您的工作空间(屏幕宽度)分为 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，当您需要针对不同的屏幕尺寸使用不同的布局时，它们为您提供了更大的灵活性:

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

该系统使您可以灵活地设置网格，在小屏幕上有 2 列，在大屏幕上有 4 列，在超大屏幕上将在 1 行中提供所有 6 个项目:

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