Streaming live at 10am (PST)

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.


Masonry layout is not possible without using some code. You have to use javascript (e.g. http://macyjs.com/). You will find the code and description here: https://github.com/bigbite/macy.js

I’ve made a rough project on this, which is free to clone: https://webflow.com/website/Masonry-Layout-with-Macyjs?s=masonry-js | live preview: https://masonry-js.webflow.io/

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: https://webflow.com/website/Smoothly-Masonry-Layout-with-Masonryjs-from-David-DeSandro?s=masonry-js-smoothly | live preview: https://masonry-js-smoothly.webflow.io/

You find more options for styling on https://masonry.desandro.com/ and https://github.com/desandro/masonry

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

Etc

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: https://codepen.io/headstarterz/pen/WNNVaeL (source: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)

Check out some resources about :nth-child selector like https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child or https://css-tricks.com/almanac/selectors/n/nth-child/

Let me know, if this does the trick.

1 Like

@PhilippX
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