Material UI Grid使用map生成卡片时布局垂直不水平问题咨询

• 核心问题是所有通过map生成的<Card>组件都被放在了同一个<Grid item>容器内。MUI Grid的水平排列规则仅作用于Grid container的直接子级Grid item节点，单个Grid item内部的多个Card默认按块级元素规则垂直堆叠，所以会出现垂直渲染的效果。
• 你移除map直接渲染多个Card时，大概率是给每个Card单独套了Grid item节点，这些item作为container的直接子元素就会按direction="row"的配置水平排列。

将Grid item放到map循环中，保证每个Card对应一个独立的Grid item，示例代码如下：

class CardList extends React.Component {
  render() {
    return (
      <Grid direction="row" container spacing={4}>
        {CardSeed.cards.map((card) => (
          <Grid item xs={3} key={`grid-${card.id}`}>
            <Card
              className="cards"
              key={`card-${card.id}`}
              id={card.id}
              header={card.header}
              title={card.title}
              category={card.category}
              summary={card.summary}
            />
          </Grid>
        ))}
      </Grid>
    );
  }
}

export default CardList;

• 循环生成的Grid item需要添加唯一key，符合React列表渲染的规范要求
• MUI Grid默认使用12列栅格系统，修改xs属性可以调整单卡片的宽度占比，比如设置xs={3}代表一行最多放4张卡片，可根据实际需求调整数值

内容的提问来源于stack exchange，提问作者ziwdig44bugs