Как сверстать такой блок с помощью гридов и возможно ли с помощью флексбокса?

Question

[Максим Иванов]

https://jsfiddle.net/sem5qpy3/5/

Можно ли с помощью флексов и как если можно?
Если на гридах, то как сделать с адаптивом?

Comments

[Вадим]

если без костылей, то вижу 2 контейнера:
1)
1 2
4 5

2)
3
6

А там уже и на флексах и на гридах можно.
Зависит от того, какой должен быть адаптив.

Или masonry раскладку.

[Ankhena]

На флексах - только с указанием высоты.

На гридах: проводите все линии до конца и считаете количество строк и столбцов. Получаете 3 столбца и 3 строки.

Если на гридах, то как сделать с адаптивом?

Перестроить в 2 столбца на планшетах и на мобилках в 1.

Answer 1

[Ilya Olovyannikov]

https://codepen.io/Olovyannikov/pen/vYXOvbL

Высота у элментов не уникальная, так что все просто! :)

Comments

[Антон Литвиненко]

да только номера карточек чуть по другому идут