Excellent. It's amazing what I pick up and learn over and above the main topic you are addressing. This is attributable to your excellent narration and video editing. It requires a couple of runs to capture all the nuggets on offer, but the payoff is so worth the time investment. Many thanks for this.
Men took me several videos to get to this solution. Great stuff! Question; is there a way to offset the first grid item? I'm using webflow's native 'First item' with a position slightly higher, but i can't seem to find a way to let this work with the script. Any suggestions?
You should probably use Javascript instead of CSS becuase MacyJS will likely overwrite the CSS with inline styles. Once the MacyJS instance is finished, you can use Javascript to adjust the top or margin-top properties to something like -2rem. I have a more advanced tutorial on integrating MAcyJS with filtering that has similar concepts on my Patreon: github.com/bigbite/macy.js Otherwise ChatGPT can probably help you out too!
hey Web Bae, loved the tutorial and it was great to see how easily we can create the masonry layout! have you had any instances where the layout would not display on mobile? it currently happens to my website and I cannot quite figure out why it would be the case.. let me know if you've got any thoughts, it would be much appreciated!
Hi Web Bae, did you try to combine this with Finsweet CMS filter? Without it works great. With CMS filter, the filtering works, but the re-arrangement of the result not. Maybe you have a solution?
Thanks for creating this! I copied your webflow clone to show product reviews and I'm having this issue - if I have just one section (div with review elements (images, review text, etc.) pulling from CMS) with masonry applied, then the format is messed up - it doesn't show the images and shows all of the text elements overlapping in a narrow off-center column. I rebuilt the page twice, stripped out every other piece of code and every other section, and I still have this problem. The only (bad) solution I've come up with is to hide the first messed up copy, and then the one below it, which is an exact copy, works. Any ideas what might be happening?
Hi, I'm looking for a horizontal masonry grid solution, but one where I can also give an image a two or three column width. Would this be possible or any advice on how to accomplish this? Preferably with a Collection List, but I've seen a few videos where it's accomplished with a Quick Stack, so also considering this, and then creating custom sizes for each item. Cheers for the great tutorial.
I'm using code sandbox in this tutorial. I usually use VS Code these days. Check out this video: ua-cam.com/video/1Wpb9TqX_CQ/v-deo.htmlsi=AhDNIYHIrum6FnFB
@@webbae yea took me hours to figure out it was tabs causing the problem and not library itself... maybe the best way is to use some other library for tabs xD
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Love the new video editing style!!
The fact i was actually looking for a video like this cus of my new project. W web bae
If you need to add filtering be sure to have a look at my Patreon - I go over this advanced use case on how to use the CMS Filter API there.
glad it helped!
Excellent.
It's amazing what I pick up and learn over and above the main topic you are addressing.
This is attributable to your excellent narration and video editing. It requires a couple of runs to capture all the nuggets on offer, but the payoff is so worth the time investment.
Many thanks for this.
Much appreciated!
Exactly what I was searching for
Glad it helped!
Very cool, thanks!
Glad you liked it!
Men took me several videos to get to this solution. Great stuff! Question; is there a way to offset the first grid item? I'm using webflow's native 'First item' with a position slightly higher, but i can't seem to find a way to let this work with the script. Any suggestions?
You should probably use Javascript instead of CSS becuase MacyJS will likely overwrite the CSS with inline styles.
Once the MacyJS instance is finished, you can use Javascript to adjust the top or margin-top properties to something like -2rem.
I have a more advanced tutorial on integrating MAcyJS with filtering that has similar concepts on my Patreon: github.com/bigbite/macy.js
Otherwise ChatGPT can probably help you out too!
hey Web Bae, loved the tutorial and it was great to see how easily we can create the masonry layout! have you had any instances where the layout would not display on mobile? it currently happens to my website and I cannot quite figure out why it would be the case.. let me know if you've got any thoughts, it would be much appreciated!
hey Adam if you can share a link in Discord I'll have a look.
Hi Web Bae, did you try to combine this with Finsweet CMS filter? Without it works great. With CMS filter, the filtering works, but the re-arrangement of the result not. Maybe you have a solution?
Hey 👋- I did a video on excactly how to do this in my Patreon. You have to destroy and recreate the instance.
www.patreon.com/posts/88560236?
Thanks for creating this! I copied your webflow clone to show product reviews and I'm having this issue - if I have just one section (div with review elements (images, review text, etc.) pulling from CMS) with masonry applied, then the format is messed up - it doesn't show the images and shows all of the text elements overlapping in a narrow off-center column. I rebuilt the page twice, stripped out every other piece of code and every other section, and I still have this problem. The only (bad) solution I've come up with is to hide the first messed up copy, and then the one below it, which is an exact copy, works. Any ideas what might be happening?
hi - it's hard for me to tell from the description. Can you share a live link in Discord?
discord.gg/chjpACpU
Hi, I'm looking for a horizontal masonry grid solution, but one where I can also give an image a two or three column width. Would this be possible or any advice on how to accomplish this? Preferably with a Collection List, but I've seen a few videos where it's accomplished with a Quick Stack, so also considering this, and then creating custom sizes for each item. Cheers for the great tutorial.
this is tricky. not sure how I would go about it honestly! :(
@@webbae Ok, well thanks for responding. I'll probably go for a static grid then by using Quick Stack, see how far I'll come. Cheers!
Where do you edit the index.js?
I'm using code sandbox in this tutorial.
I usually use VS Code these days. Check out this video: ua-cam.com/video/1Wpb9TqX_CQ/v-deo.htmlsi=AhDNIYHIrum6FnFB
this doesnt work if you have masonry inside of webflow tab :(
Webflow has its own JS to control tabs component so you might need to work around that.
@@webbae yea took me hours to figure out it was tabs causing the problem and not library itself... maybe the best way is to use some other library for tabs xD