如何在反应中使用网格扩展或适应 div 数组

Question

所以，我已经为此工作了几天，但我找不到如何使用网格扩展剩余的 div。我使用了一个数组（映射）来迭代我的对象数组，这就是为什么我无法弄清楚的原因，因为我所知道的只是针对每个 div 并设置属性 grid-row/grid-column 以使其适合。这对我来说是新的，因为我不能针对它们，因为它是迭代的。我使用 react 以防你想知道我为什么要迭代它们。

  {data.map(item => {
    return (
      <Item
        key={item.id}
        title={item.title}
        description={item.description}
      />
    );
  })}

// 这是我的卡片风格。

div.container-card{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 250px 250px;
  margin-top: 30px;
}

输出是我在顶部有 6 张卡片，在底部有 4 张卡片。我想要的是我想扩展底部剩余的 4 个以适应整个宽度。任何想法，因为我只是一个初学者（显然）。

Answer 1

我刚刚在背景中添加了背景宽度：

... {
 width: 80%;
 margin: 0 auto;
}