How to make nice sorting of images in a rectangle?

Question

css

Hello dear programmers.
--
I want to thank all those who helped me with the previous questions, you helped me a lot. Here the question is more creative than IT. In general, there is a script that makes a beautiful tile from images.
sapegin.github.io/jquery.mosaicflow
There are actually a lot of them, but the trouble with these tiles is that they are hard buggy when adapting. Everything works well on the computer monitor and laptop, but as soon as it comes to the phone, this is a real disaster. I can work with some individual objects through css3 @media, but that's not all, in the example you can see that the bottom of the image tile is like the end of torn paper. Some people may like it, but not me.
QUESTION:
How to make such an adaptive tile:

Answer 1

This can be done on flex. Just copy)

<div id="gallery">
  <img src="1.jpg" alt>
  <img src="2.jpg" alt>
  <img src="3.jpg" alt>
  …
</div>

And to these blocks the following css:

div#gallery {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0; 
}
div#gallery img { 
  width: 33.3%;
  transition: .8s opacity;
}