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

Question

[evg_96]

Есть каталог товаров. Массив товаров получается из стора. Нужно вывести это все в сетку по 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 элемента.

А при уменьшении размера экрана все ломается.

Answer 1

[0xD34F]

Нужно вывести это все в сетку по 4 элемента в строке <...> Не понятно как перебирая массив делать строки

Очевидно же - порезать массив на куски по 4 элемента, каждый будет представлять собой строку:

const { items } = this.state;
const inRow = 4;
const rows = Array.from(
  { length: Math.ceil(items.length / 4) },
  (n, i) => items.slice(i * 4, (i + 1) * 4)
);

И вместо исходного массива при рендеринге перебираете полученные куски:

{rows.map(n => (
  <div className="row">
    {n.map(m => <div>{m}</div>)}
  </div>
))}

https://jsfiddle.net/cmd7fyn3/