Build a dynamic and responsive image collage

Question

I need to build a small image collage. Like this:

I came pretty close with a flexbox and overflow:hidden; but it has too many draw backs. Like some posts get cut off.

I also came close with masonry.js but that wasn't ideal either. There was some weird gaps and image order gets scrambled.

1. I'm doing it in a Wordpress template so HTMl,PHP,CSS,JS is all good. GUI is good too, whatever.

2. Ideally the first image would be the newest post, Second is second newest and so on up to six.

3. The size labels I put on the image are kinda flexible, as long as it scales for different size screens.

4. If plugins are needed to resize images, create different sizes, etc. I'll try it.

5. The images are a custom WP field (main_image) from a post content type.

Answer 1

Read some of masonry in this link