Как выравнивать элементы с помощью css-grid таким образом?

Question

[Сергей Бурдужа]

Как выравнивать элементы таким образом:


Вот мой код css

display: grid;
grid-template-columns: repeat(auto-fit, minmax(303px, 364px));
grid-gap: 20px;
justify-content: space-between;

И вот что получилось



Видимо нужно задать еще какую-нибудь опцию.
Я только начал изучать css-grid, просто этот пример нужно реализовать сейчас.
Заранее благодарен.

Comments

[Ярослав Иванов]

Зачем тут грид ? обычными inline-block'aми можно.

[hellcaster]

Здесь очень удобно сделать через display: flex и justify-content: space-between или space-around

[Сергей Бурдужа]

muryn.official, я сперва так и сделал, только последние два блока, что во втором ряду, они располагаются по бокам, а не по центру.

[hellcaster]

Сергей Бурдужа, space-around

[Сергей Бурдужа]

Ярослав Иванов, могу с вами согласится, только у inline-block элементов будет разная высота, в зависимости от содержания элемента.
Если не найду рабочего ответа, то ваш вариант буду использовать.

[Сергей Бурдужа]

muryn.official, не работает.

[hellcaster]

Сергей Бурдужа, задайте display flex родителю. Должно работать

[Сергей Бурдужа]

muryn.official, Да, работает, я у родителя забыл убрать display grid.
Спасибо. Можете переответить, чтобы сделать ваш ответ выбранным?

Answer 1

[hellcaster]

Сделайте через display: flex и justify-content: space-around

Comments

[Сергей Бурдужа]

Спасибо, работает.