Как правильно реализовать сетку CSS Grid?

Question

[zvnex]

Доброго времени суток всем! Подскажите пожалуйста как реализовать построение сетки так, чтобы два верхних блока занимали по 50% процентов области, а нижние три карточки занимали своё пространство равномерно (~33%)
Вот пример как должна выглядеть сетка:

Если что это список из 5 элементов. (5 карточек) и желательно не разделять их на части(я так тоже умею)

Comments

[Ankhena]

Самый простой вариант:
Наименьшее общее кратное = 6.
=> 6 колонок.
1 и 2 занимают по 3 колонки
3, 4 и 5 по 2.

Что именно у вас не получилось?

[zvnex]

Решилось span'ом для grid-template.

[Ankhena]

zvnex,

Решилось span'ом для grid-template

Может, для grid-column всё таки?

Answer 1

[Сергей delphinpro]

Четыре колонки
30% 15% 15% 30%
grid-template-column: 2fr 1fr 1fr 2fr
первые блоки занимают по две колонки
третий и пятый - по одному
четвертый тоже две.

UPD

Comments

[zvnex]

Немного не понял Вас, даже если прописать grid-template-column: 2fr 1fr 1fr 2fr карточки так не встают, как на скриншоте.

[profesor08]

zvnex, для конкретных карточек надо указать количество занимаемых колонок.

[zvnex]

profesor08, Именно так и сделал, карточки всё равно не хотят так выстраиваться...

[profesor08]

zvnex, для первых двух span 3, для остальных span 2.

Answer 2

[Максим]

Так наверно