Как создать сетку товаров с одинаковым интервалом и тремя элементами в строке?

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>

Answer 1

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