Streaming live at 10am (PST)

Image gallery w/ consistent even spacing


#1

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:


#2

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.


#3

Yes it's possible using the columns widget. See, this is what I'm working on currently:


#4

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!

http://masonry.desandro.com/


#5

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.


#6

Well thanks for the quick response Vincent. With a little luck I'll figure this out one way or another. Thanks.


#7

Don't hesitate to come back with a public link later, it's easier to answer then. And @rowan solution is to explore.


#8

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


#9

Hi @itsmeblake
Basically it's like this:

  • Section
  • Container
  • Row (3 columns in my example)
  • Column (10 px padding left and right)
  • Lightbox (20 px bottom margin)

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.


#10

Thanks @rowan I'll give it shot and see how it goes... Appreciate it.


#11