Streaming live at 10am (PST)

Creating an image gallery that automatically adjusts grid margins

Hi,

I’m working to redesign and rebuild my professional portfolio from Squarespace to Webflow. I’m enjoying all of the powerful features, but there’s one that I’m missing from Squarespace: their image gallery, where I can upload many differently-sized images and have them nicely tiled, according to the images’ unique sizes.

Here’s my old website, where you can see this in action: Copywriting — Andrew Peter Craig

You’ll see that some images are tall and narrow; others are wide and short, and the image grid lays them all out according to those differences. Is this possible to recreate in Webflow?

I know that there is a grid element, which I have tried using, but it seems to not allow for that same kind of responsive margin-setting that I like in Squarespace.

Here’s the page where I’m trying to get this to work: Webflow - Andrew Peter Craig

hi @apcraig1 and welcome, masonry grid is in not possible create natively in Webflow but it can be done with a few lines of javaScript. I have recently wrote a small article how to but in code I am only playing with image original height. You can take it out from there and add image width that you will apply to columns span. probably you will need apply also dense for grid. (just guess)

@apcraig1

As an alternative to custom code, you can also try the native “column” functionality as described below:

I think this will be a more appropriate option given your previous site and can be accomplished by including all of your photos below one another in two columns :+1:

@mikeyevin good one I have miss that. I give it a try :wink:

EDIT: Oh this is based on text columns, it is not responsive. But why not give a try. :vulcan_salute:

It’s just another option for those who prefer to limit the custom code on the project and/or like to see changes within the Designer. Can never hurt providing some alternatives :wink:

As far as responsiveness, each column will take up X% of the width of the container (based on the number of columns) and can be modified on each breakpoint to reduce the number of columns as needed. The example site below (which can be cloned here) works just fine across all breakpoints:

https://masonrygrid.webflow.io/

1 Like