Как правильно сверстать секцию товаров?

Question

[maxim]

Мне нужно сверстать секцию с товарами
Если сделать такой css:

.section {
flex-wrap: wrap;
display: flex;
}
.item {
width: 300px;
margin-left: 10px;
}

То margin у items будет делать отступ справа у стенки section :/

Как исправить?

Comments

[Ankhena]

- Заменить на гриды и использовать gap (или еще немножко подождать и использовать его с флексами)
- Задать отрицательный margin у контейнера
- Использовать :not и :nth-child, но не всегда возможно без js.

Answer 1

[Антон]

.section {
flex-wrap: wrap;
display: flex;
margin:0 -15px;
}
.item {
width: calc(25% - 30px);
margin: 0 15px 30px;
}

Answer 2

[gru_boy]

.section{
  display: flex;
  column-gap: 10px;
}