Javascript 为来自API调用的数据创建动态网格（行和列）

我对React JS和JavaScript一无所知。我正在做一个小项目来练习。我无法创建动态行和列。因此，我可以有4列数据，而对于第5列数据，它应该创建新的行和列，并应持续到数据结束

比如说

下面是代码

import React, { Component } from 'react';
import './itemslist.css';
import axios from 'axios';
import { Link } from 'react-router-dom';



class ItemsList extends Component{

  constructor(props){
  super(props);
  this.state = {
    productList: []
  }
  }

  async componentDidMount(){
    const homeAPI = `${window.apiHost}/api/items/`;
    await axios.get(homeAPI).then(res => {
      this.setState({productList: res.data.result.product_data})
    })
  }

  render(){

//this where i am not able to make row and col.

    const products = this.state.productList.map((product, i)=>{
      return(

          <div className="card text-center card_style" key={i} style={{marginBottom: '120px'}}>
            <div className="card-header">
              {product.name}
            </div>
            <Link to={`/items/${product.id}`}>
              <img className="card-img-top card_image" src={product.image} alt="Card"/>
            </Link>
            <div className="card-footer text-muted">
              <p className="card-text">{product.description}</p>
              {product.price}
            </div>
          </div>

      )
    }
  )
    return(
      <div className="item_list_main">
        {products}
      </div>
    )
  }
}


export default ItemsList;

---

我该怎么做呢？

@Milan\u Thapa。您可以使用宽度：25%；在每个组件中。 但假设组件大小可以不同。宽度和高度可能非常不同

最好的选择是使用在这种情况下非常流行的砌体

---

希望这能奏效。

将其添加到css文件中

有关更多信息，请参阅

---

这意味着对于一行，您的列将由四个片段组成。

您可以添加css文件吗。到目前为止，你尝试过什么来包装你的产品？@chandan_kr_jha我尝试过CSS，但没有成功。我试图包装产品，但我也失败了。你必须使用flexbox或grid。@chandan_kr_jha我可以用grid制作行和列，但动态制作是我无法做到的。我会尝试这个。

.item_list_main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}