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

Question

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

我正在尝试拥有这样的产品网格，但我无法弄清楚如何仅针对三个项目进行操作。

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

每个项目周围的间距相等，每行只有 3 个项目。但在移动视图上减少到每行只有一个项目。弹性或网格解决方案都可以工作。

//Parent    

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

//Child

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

标签： csssass

Answer 1

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