Streaming live at 10am (PST)

Staggered CMS Collection

Hi there,
I’m trying to create a CMS masonry collection list like this:

I’ve created a CMS collection list and turned it into a masonry grid by using text columns. Now I’m wondering how I can stagger the upper row of CMS items like in the prototype above?

Thank you for your help!

Simon.


Here is my public share link: relight.one

I’m really interested in this, because I’ve tried all sorts with grids and columns to get a set of good masonry layouts and they just seem too unreliable for a client site unfortunately.

You may just get away with columns on this layout, but for the beauty of this layout you probably need to know the parameters of the images and texts so you can adjust margins on selected (probably calculated) elements. Of course this is possible if you can reliably know/calculate the dimensions of the inputs. But as with everything in this space, garbage in = garbage out.

I have a whole project file for masonry where I keep trying to adjust things to make a set of perfect layouts I could use in our work projects but there are always problems - and in most cases, the problems are with the Safari browser.

Could you share the link where you found this please? Also, your share link doesn’t seem to work…

You can select the first, second and fourth collection items with a simple javascript / jquery script and add some margins to them that way.

Like so:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
$( document ).ready(function() {
		document.getElementsByClassName("COLLECTION ITEM CLASS")[0].style.margin = "40px 0px 0px 0px";
		document.getElementsByClassName("COLLECTION ITEM CLASS")[2].style.margin = "20px 0px 0px 0px";
        document.getElementsByClassName("COLLECTION ITEM CLASS")[3].style.margin = "25px 0px 0px 0px";
});
</script>

@Fonsume thank you so much for your help!!
How exactly do I have to connect the script with the specific collection items? So where in the CSS do I have to put the class of the collection items?

My Javascript and CSS skills are close to zero :joy:

Here is the read only link again: Webflow - relight

Hi @iratefox,
it’s actually very easy once you know how to do it. Here is a very good video tutorial about it: Easy Masonry Grid Image Gallery in Webflow | Grid Like Pinterest - YouTube

Hope it helps!

Thanks, but actually this is just getting started.

In my workings so far I’ve been able to address a number of issues (such as where the element breaks, to keep items whole and not spilling over to the next column) but the one thing that I’ve never managed to solve is keeping the alignment perfect across the top on all the main browsers, again - Safari being the main issue. I guarantee you’ll have issues with just using columns on its own when you’ve got more to the card than an image - you just may not spot them.

Something to consider when explicitly stating margins in JS is that you need to break these down to fit breakpoints appropriately otherwise it’ll look very strange on other devices. This is why I mentioned calculations initially and why this is a lot more complex if it’s to be done well and account for dynamic items.

@iratefox could you send me a read-only link? then I could check it out.

It is important that you set the collection list and the collection list wrapper to the display setting “block”. The Collection item has to be set on “Inline-Block” in order not to break.

Your collection items currently has the class name “Collection Item 3”. You can change it to whatever you’d like.

2021-03-27 17_29_56-Window
Just click it and change the name.

You have inserted the code in the correct place. You need to swap the “COLLECTION ITEM CLASS” bit in it to the same name you choose above. Modify the pixel counts in the code as needed too.

Hi @Fonsume
thank you for your detailed answer.
I’ve renamed the class and replaced the “COLLECTION ITEM CLASS” bit with it. But unfortunately it sill is not working.

Here is a screenshot of the script. What have I done wrong?

Thanks again!!

It should be (place-card), not (.Place-Card) :slight_smile:

I’ve tried it too, but unfortunately it doesn’t worked.

class name should be in " "

try changing it to (".place-card")

FYI: Webflow auto loads jQuery (v3.51) before body close on all projects. No need to add it again.

In my experience it doesn’t do this. The code didn’t run on my test page until I included jquery (got “$ is not defined” errors).

Why? It’s using the .getElementsbyClassName selector. It should be (“CLASSNAME”). It works like a charm on my test page.

The scripts that depend on JQ have to be loaded in the before body close area.

Yeah your right my bad that should be working, if its still not working you could try changing it to ‘querySelectorAll(".place-card")’ or ‘querySelector(".place-card")’