Can anybody help with different height collection list items?

I am trying to manage a dynamic grid/column layout which is feeded from collection. My idea is I wanted this to be dynamic so neither which collection item appears if it is in the 3x3 matrix element #1 in first row it dynamically gets the predefined height, # 2 gets another height, and # 3 gets his own height. Next row there are different heights, and third row also different heights. But the idea that the column with 3 rows always same height as other columns.

1 Like

Masonry layout is not possible without using some code. You have to use javascript (e.g. You will find the code and description here:

I’ve made a rough project on this, which is free to clone: | live preview:

1 Like

Thanks Philip it looks like what I need - but unsure where is the js code is stored in the project? I cannot see any embed code adding

Your’re welcome! You can find the code in the before tag of the Home site (see image below),

1 Like

@Evgeniy I’ve made a second project using the masonry.js from David DeSandro which I have already used in some larger projects. This script is a little bit harder to set up than Macy.js if you would like to adjust margins, columns etc., but renders a bit smoother when changing the window size. For the clonable project I have broke the code down to the essential.

You can clone it here: | live preview:

You find more options for styling on and

I have already tested both scripts in different projects. both work well. Check out, which works better for your specific case.

1 Like

hi @PhilippX - I cloned your project and played a bit but unsure it is something what I need. As far as I can see the height of the thumbnail images is set in the blog post collection item so I cant set it manually.
With this JS I can set number of columns and it renders it better than standard webflow so adjustable by height of the images. What I need is to be able to set height of the image dynamically depending on the position of the 3x3 matrix

E.g. I want to set

             #1 column       #2 column   #3 column
#1 row       500             420         550
#2 row       550             500         420
#3 row       420             550         500
#4 row       500             420         550
#5 row       550             500         420
#6 row       420             550         500


So each 3 rows gets same height and it is set dynamically of the position of the post in the queue. So say if new post appears and goes to row#1 column#1 position it gets 500 height and others adjusted dynamically.

Hope it makes sense. I realise it can be tricky so that is why I am here. Thanks in advance for your help

I think you could combine masonry.js with some CSS pseudo class tricks like that:
.w-dyn-items:nth-child(2n+1) {height: 500px} and so on...

I haven’t played too much with this function yet, but I often use it to add alternating backgrounds to cms items in an overview list.

In the case at hand this could result basically in something like this: (source:

Check out some resources about :nth-child selector like or

Let me know, if this does the trick.

1 Like

After a while of researching have not covered the correct solution of dynamic item height in a grid and so stopped on manually adding Height for Items in the collection following this tutorial

1 Like

Hey there,

I’m attempting to use the Macy container for the variable heigh 3 col grid. The grid is actually being used to create various FAQ dropdown items. Meaning that that the heights of each item need to be reloaded / recalculated each time the user clicks on a a particular FAQ dropdown. This isn’t working with the current script you’ve provided @PhilippX

I’ve had a look at the Github page and they do have a recalculate function. I’m unsure how to implement this. Any help would be great!