Как сделать адаптивную необычную плитку с картинками (как на скрине)?

Question

[Сергей]

Как лучше сделать такое же расположение картинок как на скрине? Красных линий не должно быть (нарисовал их для того, чтобы показать, что от картинок одинаковый отступ должен быть, но не очень ровно нарисовал).
Использую bootstrap 4. Можно и без него, рассмотрю все варианты.

Comments

[MeylisDay]

https://codepen.io/meylisday/pen/aqEWpz можно вот так вот наговнокодить

Answer 1

[mdss]

.col+.col+.col>.col__sub+.col__sub

Answer 2

[I'm Yoda]

Здесь все ответы на ваш вопрос!

Answer 3

[hopeful_romantic]

https://masonry.desandro.com/

Comments

[Evgeny Zaharov]

Это не Masonry. Размеры блоков не зависят от контента - нужна обычная верстка.

Answer 4

[Evgeny Zaharov]

div.container
  div.col-6
  div.col-3
  div.col-3
    div.container
      div.col-12
      div.col-12

Где div.col-12 с высотой в 50%. Всем col паддинги, но нужны в 2 раза меньше нижний паддинг у верхнего .col-12 и верхний паддинг у нижнего.