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 
Here is the read only link again: https://preview.webflow.com/preview/relight?utm_medium=preview_link&utm_source=designer&utm_content=relight&preview=0890bf9b650200197a77511766676d8b&pageId=605ee71adb9ddc21328c16ee&mode=preview
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.
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) 
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”)’
Wow this topic is right on-point with what I’m trying to achieve! I’m building a CMS-populated masonry grid, in three columns. However, instead of just having images in the grid, each element is composed of a Div block with multiple text blocks and a button. The problem I encounter is that when I set my Div block to “Inline-Block”, the top Div Block of the 2nd and 3rd columns stacks over the second Div Block, as if the columns don’t account for the space occupied by that top Div Block.
If you look closely, you will also see that the Box Shadow effect of these Top Div Block are cropped at the top.
What am I missing? Hopefully there’s a simple no-code solution for this?
EDIT: Safari has a weird behavior. It separates my Div Blocks on multiple columns! (Although the top blocks don’t stack on top of the 2nd block)
