Как сделать сетку по 4 элемента в строке?

Есть каталог товаров. Массив товаров получается из стора. Нужно вывести это все в сетку по 4 элемента в строке и чтобы все было по центру и чтобы каждая карточка была одинаковой ширины. Как это сделать имея просто массив товаров? Не понятно как перебирая массив делать строки (className="row").

Сейчас сделал так:

<div className="container">
  <div className="row">
    {
      this.props.catalog.map(product => (
        <Card
          className="col"
          key={product.uid}
          name={product.name}
          price={product.price}
          imageUrl={product.imageUrl}
          weight={product.weight}
          diameter={product.diameter}
        />
      ))
    }
  </div>
</div>

Но опять же не строго по 4 элемента.