How to make an adaptive unusual tile with pictures (as in the screenshot)?

Question

css

What is the best way to make the same arrangement of pictures as on the screen? There should not be red lines (I drew them in order to show that there should be the same indent from the pictures, but I didn’t draw them very evenly).
I use bootstrap 4. It is possible without it, I will consider all options.

Answer 1

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

Answer 2

Here are all the answers to your question!

Answer 3

https://masonry.desandro.com/

Answer 4

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

Where div.col-12 with 50% height. All col paddings, but we need 2 times less bottom padding for the top .col-12 and top padding for the bottom one.