Whilst we wait for all browsers to support the CSS masonry style grid-template-rows:masonry, this is a CSS only method that comes pretty close to the producing a masonry style grid layout.

This version lays out the images row by row and positions each image the same way as produced by javascript versions, and as produced by grid-template-rows:masonry.

It does require a few calculations to make it work but the result is worth it.

This demonstration uses quite a few different aspect ratio images, but if you just have landscape and portrait images with the same aspect ratio then there are just two calculations.