Dynamic list with lightbox images displayed in masonry grid

[stacym (Stacy)]

I’m new to Webflow (new to everything, really), so please be gentle.

I’m trying to do gallery pages that are dynamically linked to an image collection in a lightbox so it can be updated/edited with the CMS Editor. The images are a combination of landscape and portrait, so the layout has some pretty ugly gaps. I’d like it to be displayed as a masonry grid. Is this even possible?

The page in question is https://atlantic-auto-trim-glass.webflow.io/photo-galleries/stationary-awnings

And as long as you’re still reading (and thanks for that, btw), is there any way to add forward/back navigation in the lightbox?

Thanks so much!!

Stacy

---

Here is my public share link: https://preview.webflow.com/preview/atlantic-auto-trim-glass?preview=13cf4d99ce842512e8eb7dd71929e22f

[PixelGeek (Nelson)]

Hi @stacym Welcome to the community!

Here is a tutorial that may help:

Webflow Masonry grid ( #Pinterest), no Custom Code required

Continuing the discussion from Masonry grid ( #Pinterest) in Webflow. Created by CSS only: So lately, I found out that same CSS Masonry grid is possible to create WITHOUT ANY CUSTOM CODE. All you have to do is use Webflow text columns option for your “grid container” (or div, or section). Items inside your container could be images, div blocks with text inside, lightboxes, link blocks, but they have to have WIDTH=100%. With every screen type (desktop, tablet, mobile) you can easy change colum…

Cheers

[stacym (Stacy)]

Thanks, PixelGeek! I had looked at that, but it didn’t click until I just read through it again.

Any tips on how I can put navigational arrows/forward-back nav on the large lightbox images?

Thanks again!