What would the easiest way be to replicate a gallery with different image sizes without strict column widths such as http://www.dallotsegu.ro?

 

Can CSS Grid do this?

 

Or do I need to code some JavaScript logic?

Perhaps there is a library that someone knows about? I looked at Masonry but it seems to have fixed column widths which I am not keen on.

 

I would appreciate your thoughts.

These layouts look great on a large screen but not so good on a phone (or smaller tablet). I did some work on this sort of layout a while back and just couldn't get it to work responsively. The example you gave ends up with just a single image you have to touch to see the next. And in doing so looks naff.

 

But I'm sure someone will be along soon to offer a suggestion on how to do this.

You can build up a grid like this using the grid that is provided in Nebula by nesting grids inside one of another http://rbrtsmith.com/nebula-css/#grid

scroll down to the heading "Nested grid with equal heights, horizontal reversal"

Unless you have a good reason to do this though i'd just avoid the complexity. Why add in complexity to your codebase if it doesn't increase the user experience sufficiently? A lot of these layouts are just from designers / developers trying to be clever - which is great to do in your learning but for client projects your aim is to deliver great UX and minimal bugs so these complex layouts don't typically help you reach that goal.

wouldn't this be an ideal candidate for flexbox?! assuming compatible target browser support

wouldn't this be an ideal candidate for flexbox?! assuming compatible target browser support

Assuming the images are fetched asynchronously (Lazy loaded) flexbox would result in pretty poor rendering performance. Shouldn't really be used for full-page grids.

https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/

Thanks for the advice on this. I did in the end persuade my client to go for a simpler layout which she likes.