Переход от макета сетки CSS к флексбоксу ⇐ CSS

[Anonymous]

Мне было поручено изменить данный код, использующий сетку CSS, на код, использующий макет CSS flexbox.
Это была заданная структура HTML:

Код: Выделить всё

[img]something.jpg[/img]

Item 1

Price: €8

[url=details.html]Details[/url]


[img]something.jpg[/img]

Item 2

Price: €5/p>

[url=details.html]Details[/url]


...(4 more of these card like elements)

Код: Выделить всё

.listing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
gap: 10px;
padding: 10px;
justify-content: center;
align-content: center;
}

Код создал сетку, которая выглядела следующим образом:

Код: Выделить всё

item1 item2 item3 item4
item5 item6

Когда я перешёл на flexbox, используя:

Код: Выделить всё

.listing-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
justify-content: center;
align-content: center;
}

and adding to:
.listing {
width: calc(25% - 20px);
}

У меня получился вот такой макет:

Код: Выделить всё

item1 item2 item3 item4
item5 item6

Я пробовал изменить justify-content: center на justify-content: left, но это выравнивает карточки по левому краю и смещает весь раздел влево. левый, который мне не подходит. Тоже делаю это, но добавление поля слева кажется глупым способом решения этой проблемы, тем более что он не реагирует.
Любой другой способ добиться этого с сохранением отзывчивости дизайн и желаемый макет карты, а также использовать макет флексбокса?

Подробнее здесь: https://stackoverflow.com/questions/791 ... to-flexbox