How to make my lightbox thumbnails fit together in masonry grid style?

Design help General
1

Hey friends. I’ve been using Webflow for a year or so on a different account for the company I work for, and now I’m trying to use it for my personal photography business too. I can’t seem to find a simple way to make the thumbnails on this page fit together seamlessly, like a “masonry grid.” https://genejeter.webflow.io/portfolio/portrait

Because some are landscape and some are portrait, they have big gaps between a few of them.

Though I have Webflow experience, my know-how is pretty basic and limited to the built-in Designer tools. I am not a coder, so if I do need custom code (was hoping to avoid that), I’ll need some very step-by-step instructions on how to install it. I apologize for my lack of coding knowledge.

Thank you so much in advance for helping me out. I love how helpful this community is.

Gene

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello.
You could try to Columns! When you’re using a div block for the image’s, set under ‘Styles’ - ‘Typography’ - ‘More type options’ the Columns fields to 3 or another number. Then all pictures will nicely fit together.

1 Like
3

Thank you so much!!! I had tried to do that on the images themselves. I didn’t realized they had to be in a Div Block and I had to apply the text column feature to the div block. It worked! THank you!!!

4

@genejeter @HGWeb May I please ask how you got the columns to work with lightbox?
When the content is columns, lightbox doesn’t work at all…
I posted a question about it here: