Different size images in grid

Question

I'm looking for some advice on how to approach creating a grid like the picture included. The images are going to be of different sizes.

It will be included in a wordpress theme that when images are uploaded to the specific post type they will display where the pictures are shown.

I was leaning towards a list with different styles for &:nth-of-type() styles.

TIA for any advice, all is appreciated.

Answer 1

I would try using something like Masonry ( https://masonry.desandro.com/ ). Great library, very versatile. There are also frameworks that support grids on demand and nested grids, like SusyGrid ( https://www.oddbird.net/susy/ ). I have used this successfully in the past for asymetrical and nested grid layouts.