Creating an image gallery that automatically adjusts grid margins

[apcraig1 (apcraig1@gmail.com)]

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: https://andrewpetercraig.com/copywriting

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: https://preview.webflow.com/preview/andrew-peter-craig?utm_medium=preview_link&utm_source=designer&utm_content=andrew-peter-craig&preview=3af2bf859c7deeb758cad3868264c7e8&pageId=601063452d1d66db5aea9d06&mode=preview

[Stan (justAnotherDeveloper)]

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)

Masonry layout from CMS images

In last week I have worked on masonry layout using API calls and custom JS. There are another options as to use JS libraries to achieve Masonry layout but I was just experimenting. [CleanShot 2021-01-18 at 15.37.33] So I was thinking if I can implement this layout on Webflow from images in CMS as easy as with custom code from scratch. And I had a hard time ( I’m not as fluent with WF yet) but make it work. Main approach was to take original height of image use JS Math() to get usable number …

[mikeyevin]

@apcraig1

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

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…

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

[Stan (justAnotherDeveloper)]

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

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

[mikeyevin]

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

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/