Hey all, I need help/advise with building out this image gallery of different sized images that has consistent even spacing of 30/35 px on all sides that works when scaled at different break points… I’ve tried several times using different methods to no avail… I’m asking for a step by step solution please (Image Gallery for Dummies). I would really appreciate it and thanks in advance for any help.
My template I’m trying to recreate:
A grid like this won’t work simply in HTML/CSS. People usually use a Javascript library called Masonry.js to achieve such grids. However there’s maybe a way doing this using the columns widget in Webflow with one column=one pile of photos.
Thanks Vincent, a couple of questions if you don’t mind? How do I install masonry.js into the webflow environment? How do I then add images to masonry and set columns, margin/padding? Cheers!
I don’t mind, but I’m not at all skilled in Javascript and how to use libraries. I never do it by myself, not even just a little bit, sorry.
Well thanks for the quick response Vincent. With a little luck I’ll figure this out one way or another. Thanks.
Don’t hesitate to come back with a public link later, it’s easier to answer then. And @rowan solution is to explore.
Hi @rowan if you don’t mind could you post your steps that got you to where you are in this example image? I’ve tried section>container>columns>div-block>image… and different combinations of these and haven’t got the results I was looking for in terms of even spacing and flush tops & bottoms w/ different image heights but same widths…
Cheers, Blake
Hi @itsmeblake
Basically it’s like this:
With these settings you can just add multiple lightbox below each other in each column. Just be sure to give the thumbnail inside the lightbox an height:auto. That way you can use different size thumbnails, resulting in a masonry-like grid.
Thanks @rowan I’ll give it shot and see how it goes… Appreciate it.
