Another method to produce a CSS only 'masonry' type layout using just CSS.

This one uses the aspect ratio of each image to workout the width of a set number of images to fill each row and keep the height the same for all these images.

The number of images per row is set up in the html.

The only problem is that to make this responsive you will need to have several 'frames' with a different number of images on each row and switch frames depending on the screen width.

I think that it should be possible to use just CSS to set the number of images on each row.

This demo also uses scroll timeline and popover large images.

FIXED 20/10/2024 - 16:00

Just found a way around the multi frames problem.

Now only one frame which is fully responsive without the need for media queries.