Медиа блок из 4 новостей, с разным размером блока, как релизовать?

Question

[Антон Вебсайтовский]

Всем привет, подобное не делал, по этому появился вопрос.
Вывожу из контроллера 4 новости на главную, как мне сформировать блоки так, чтобы было как на скрине.
Каждая новость обернута в свой div.

Я пробую сделать по типу:
nth-of-type(1)
nth-of-type(2)
nth-of-type(3)
nth-of-type(4)

Таким методом для каждой новости я смогу применить свои параметры длины, высоты и т.д
Но пока чет не понял как реализовать, может как-то по другому реализовывают через flex.
Надож чтобы все адаптировалось, ну и отступы как на скрине сделать бы.
Подсветил блоки разными цветами чтобы понятно было где какой блок.

То что я сделал:
https://codepen.io/AXOT/pen/QWBqNPY

Comments

[Вадим]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Антон Вебсайтовский]

Вадим, Насчет грида знаю, спасибо, но пока не хочу его использовать.

[Антон Вебсайтовский]

Вадим, а на грид получится, чтобы див не много было, то есть по типу как у меня, 4 блока див, а не так как делают обычным способов, что допустим в последнем блоке идет 3 и 4.

[Вадим]

Антон Вебсайтовский, не понял вопроса

[Вадим]

Антон Вебсайтовский, как угодно можно расставить элементы в гриде. В любом порядке.

[Ankhena]

Флексы не сделают такую сетку без дополнительных оберток.
Грид это решает за 1,5 минуты.

[Антон Вебсайтовский]

Ankhena, да я уже понял, вот и спрашивал, думал может кто-то знает то чего я не знаю )), спасибо, доп обертка она заставляет написать php вывод новостей по другому, грид уже поддерживает 95% браузеров, так что пора начинать юзать.