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

Question

所以，我已经为此工作了几天，但我找不到如何使用网格扩展剩余的 divs。我使用一个数组（地图）来迭代我的对象数组，这就是为什么我无法弄清楚的原因，因为我所知道的只是通过定位每个 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;
}

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

How to expand or fit array of divs using grid in react

javascript

css

grid

css-position

reactjs