A demonstration of a masonry grid using just CSS.

This uses the standard size images with aspect ratios of 4:3 and 3:2 in both landscape and portrait orientation.

To keep the images in columns they all must have the same width, so in this demo I have set the:
grid-template-columns: repeat(auto-fit, minmax(5px, 1fr));
and the:
grid-template-rows: repeat(auto-fit, minmax(5px, 1fr));
with each image spanning 12 columns:
#pics div {grid-column-end: span 12; position:relative;}

12 columns has been chosen because this is divisible by 2, 3 and 4, so it is easy to workout the grid row end for both image aspect ratios in landscape and portrait orientation.

For 4:3 images this becomes 12:9 landscape and 12:16 portrait.
For 3:2 images this becomes 12:8 landscape and 12:18 portrait.

Make all div the same width:

#pics div {grid-column-end: span 12; position:relative;}

Make height of landscape div have aspect ratio 12/9 (4/3) or 12/8 (3/2)

#pics div.landscape-4-3 {grid-row-end: span 9;}
#pics div.landscape-3-2 {grid-row-end: span 8;}

Make height of portrait div have aspect ratio 12/16 (3/4) or 12/18 (2/3)

#pics div.portrait-3-4 {grid-row-end: span 16;}
#pics div.portrait-2-3 {grid-row-end: span 18;}

To ensure the images fill the the divs, because there may be pixel errors in the calculations.

#pics img {width:100%; height:100%; object-fit:cover;}

I have added the photo number to each image div so that you can see that the placement is exactly the same as in a masonry grid. This method will be redundant once all browsers support
grid-template-rows:masonry;.