Javascript 将项目映射到网格上

我有一个对象数组。每个对象包含3个图像、名称和详细信息。我试图将这些对象映射到一张引导卡上，但每张卡都在一条单独的线上渲染。我希望这些卡片形成一个网格。一行3张卡，其余在下一行

const data = [
    nikeItem1,
    nikeItem2,
    adidasItem1,
    adidasItem2,
    reebokItem1,
    reebokItem2,
    uaItem1,
    uaItem2,
  ];
{data.map((item, i) => {
        const img = item ? item.img1 : null;
        const heading = item ? item.name : null;
        const desc = item ? item.detail : null;
        return (
            <div className="card " style={{ width: "18rem" }}>
              <img src={img} className="card-img-top" />
              <div className="card-body">
                <h5 className="card-title">{heading}</h5>
                <p className="card-text">{desc}</p>
              </div>
            </div>
        );
      })}

const数据=[
nikeItem1，
nikeItem2，
adidasItem1，
Adidasite2，
锐步1，
锐步2，
第1项，
第2项，
];
{data.map（（项目，i）=>{
常量img=item？item.img1:空；
const heading=item？item.name:空；
const desc=item？item.detail:空；
返回(
{标题}
{desc}
);
})}

---

所有内容都需要从引导创建。

使用一行作为主容器，

className=row

然后在其中添加另一个div，并使用

className=“col-4”

将卡添加到其中

行>列-4>卡

演示访问：

---

我对React不太了解，但这是使用引导的方式，如果您返回html，这应该可以工作。

您使用的CSS将有助于回答这个问题