css - 如何创建间距相等且每行三个元素的产品网格？

Question

如果问题已经被问到但过去的解决方案对我没有帮助，我深表歉意。

我正在尝试创建这样的产品网格，但我无法弄清楚如何只针对三个元素执行此操作。

https://i.ibb.co/gVtHZW1/Screenshot-48.png

每个元素周围的间距相等，每行只有 3 个元素。但在移动 View 上减少到每行只有一个元素。 flex 或 grid 解决方案都可以工作。

//Parent    

<div className="product-list-inner" >
  {
    product.map(item => <ProductItem id={item.id} item={item} />)
  }
</div>

//Child

<div className="product_item">
...
</div>

Answer 1

.product-list-inner{
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr) );
    @media screen( max-width: 768px){
        grid-template-columns: 1fr;
    }
}