Как сделать каталог товаров?

Question

[Vova135798]

Как сделать адаптивный каталог товаров? Должно быть максимум 4 товара в ряду. Я попытался что-то сделать, но у меня возникла проблема: товары не уходят на следующий ряд.
https://codepen.io/vladimir2021794/pen/MWvRPyy

Comments

[Ankhena]

Для переноса нужен flex-wrap:wrap.

Если вы задали карточке 20% и между ними нет отступов, то влезут 5, а не 4.

Очень удобно такие вещи делать гридами.
Например,

display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

Так будет всегда 4 равных столбца и промежутки между ними по 20px.

Либо использовать auto-fit (или auto-fill) и minmax к нему.

grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

[Vova135798]

Ankhena, Я могу установить отступы между столбцами, которые будут меняться в зависимости от размера экрана?

[Ankhena]

Vova135798, вы всегда можете сделать тестовую страницу или песочницу и узнать разницу в поведении разных способов.

Почему-то я думал, что grid для такого не подойдет.

Грид для такого подходит идеально.

Answer 1

[Alex_mos]

.product-list{
display:flex;
flex-wrap:wrap
}