Material-UI Grid 溢出列到下一行答案

【问题标题】：Material-UI Grid Overflow Column into next RowMaterial-UI Grid 溢出列到下一行
【发布时间】：2019-12-27 04:44:59
【问题描述】：

我正在从“x”项列表中生成一个列表：我想知道如何让列表像这样显示

项目1项目2

item3 item4

项目5项目6

使用 Material-UI 网格。目前我正在使用类似的东西，但它只在单个列中生成它们。

  const display = () => {
    return(
      <React.Fragment>
        {items.map(i => (
          <Grid item xs={3} direction={'row'}>
            {i}
          </Grid>
        ))}
      </React.Fragment>
    )
  }

return (
            <Grid item xs={4} alignItems={"flex-start"}>
              items:
            </Grid>
            <Grid item xs={8} justify={"center"} alignItems={"flex-end"} direction={"column"}>
              {display()}
            </Grid>
)

【问题讨论】：

标签： reactjs flexbox grid material-ui

【解决方案1】：

您需要将物品均匀分布。网格系统基于12 点，所以保持xs={6} 是您要寻找的

<Grid container>
  {items.map((item, key) => (
     <Grid item key={key} xs={6} className={classes.item}>
         {item}
     </Grid>
   ))}
</Grid>

我在https://codesandbox.io/s/material-demo-qe7mr 添加了一个工作示例希望对您有所帮助。谢谢

【讨论】：