Как сверстать такой сайт?

Question

[Skyfall]

Изучаю верстку, подскажите как сверстать такой лендинг, чтобы отображались в три колонки (плюс
есть особенность, что одна картинка занимает две колонки). Примерно понимаю, что для этого нужен грид, но что не пробовал, получаються три колонки, но не с теми елементами.
Код здесь
Создал элемент main, в котором есть два дива main__container для первых двух столбцов и в самом низу второй див sidebar__post для третьего столбца.
В main__container создал по секции для каждой фотографии с тайлами.



https://codepen.io/skyfal365/pen/YzrJMMx

Answer 1

[DanielTonne]

Пример на Grid
Пример на Flex
Пример структуры сайта из вопроса

Comments

[Skyfall]

спасибо большое!

Answer 2

[Тынай Бакасов]

Вот тебе насчёт фотографий в две колонны

Вот ещё

А тут вот про две колонны, в первый будешь делать двойную картинку.

Comments

[Skyfall]

спасибо большое!

[Тынай Бакасов]

Skyfall, если ваш вопрос решён, отметьте что решено.

Answer 3

[true]

тут надо изучить css
без этого никак

и главное - показать свой код в песочнице

Comments

[Skyfall]

изучать изучаю, но у меня без практики теория быстро забывается
код добавил, правда не знаю будет ли все понятно

[Vladislav]

Справа сайдбар, по центру контент гридами

[Skyfall]

Vladislav, это вкурсе, но не знал как правильно это дело реализовать