Dynamic CMS Grid in Webflow

Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=c...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@yolkk]

I named my CMS options "Tall" instead of "tall" (then put "tall" in the CSS). Pulled my hair out for a good 10 whilst it didn't work. Thought I'd add the comment incase someone else did the same. Great tutorial :)

[@graceongrid]

This is exactly the tutorial I needed for a current project. You always seem to come out with things at the exact right time! Thank you for all the time and energy you put into these videos 🙌

[@timothyricks]

Oh, wow! Thank you, Grace! I’m really glad this helps

[@NoahShreve]

Accessing CMS data in attributes is such a game changer

[@biniamjohannes9853]

FANTASTIC TUTORIAL TIMOTHY!!

[@loyaldesignco]

Awesome use case for the dynamic attributes! Game changer. Thanks Tim!

[@JakeSpirek]

Thanks for this, Timothy! Great use-case for the new dynamic attributes. Love your tutorials.

[@marijanastojanovic198]

Thank you for everything you do, Timothy. 👏😊

[@harmfull1]

As always! Timothy Straight to the points thanks for this one!

[@badboujee]

Brilliant! Never thought about styling CMS items via data-attributes, but that is such a smart idea! WIll put to good use soon. Thanks for sharing!

[@MatthewMunger]

Great use of dynamic attribute binding!

[@ihajo]

Great tutorial, direct to the point and a very clever use of the grid, thanks

[@madsness101]

Amazing Timothy! As for many others here in the comments this came out just in the right time. With the help of your content I can really take my projects to the next level. Thank you so much!

[@Raavail]

Amazing! This issue comes up so many times, and this is such an elegant solution, especially for clients! Thank you!

[@davidacreates]

this is so good. going to use this to refactor a project this week.

[@user-bp5mu4os3n]

The best teacher in this space. So clear and what a beautiful solution

[@andresochoa3040]

You make it look very easy!! You are a Webflow machine!!

[@martinmendivil2522]

You're a wizard. This is so useful and it's such a clever approach. I want to be like you when I'm older!

[@frankiejamieson3690]

Awesome video, thanks!

[@HarshitAgrawalOfficial]

Wow! As always amazing trick Timothy! 🎉

[@timothyricks]

Thanks so much, Harshit!

[@rileydesign]

Brilliant, thanks for sharing!

[@lad1723]

Top notch! Thanks for the amazing work. Exactly what i needed.

[@wacho7934]

Damn Timothy, everytime I need something you have a video for it. Thank you a lot for all the help ✌✌

[@bamoj]

This is super smart!!

[@IkevanGerven]

You are a hero! What a great and actually simple solution for a fantastic layout. Thank you.

[@timothyricks]

So glad this helps! Thank you!

[@kjellruben]

Amazing! Would love more of these! :D

[@user-wu5ii6th4r]

Thank you Tim!!! You are awesome

[@mislavrepinac]

Now I see why they call you a Webflow wizard. This is so impressive!

[@wearestudiotonic]

This is so sneaky and awesome, great work man and thanks for sharing.

[@timothyricks]

Thanks so much!

[@tuttoele]

Really a smart solution, thank you! 😄

[@danielcobb6486]

Love this solution!! Top stuff

[@vcrazyedits]

This video came out just at the right time! I was literally searching for how have dynamic sizes for my cms grid. Thanks so much!! :D

[@timothyricks]

Oh, awesome!! Glad this helps!

[@yasirmullancheri239]

Same here.... Thanks @Timothy Ricks🎉

[@AurelienSchibli]

brilliant. and so simple

[@pablogday]

Smart! Thanks for sharing.

[@emrannaziremon5503]

Great work 🎉🎉🎉 You are just awesome ❤

[@patrickspiegel]

Ok wow, this is awesome!! Thanks :)

[@tomsmith6991]

As always, great tutorial 👨🏻‍💻🚀Got a site for a client coming soon that this will be perfect for! - Thank you! 🔆

[@ironykortehobe]

Very Thank you sir

[@akbarbadsha25]

wow love this tutorial. Its super awesome :)

[@anshkid]

Just brilliant man!

[@timothyricks]

Thanks so much!

[@FernandoComet]

Awesome!

[@thooriga]

Helpful Thanks so much!!

[@ojayz9220]

thank you

[@HelenPoylova]

True Genious ! 🤩

[@dimaka5495]

Nice tutorial! I would rather control it all with CSS. Let's say we set a grid for the first 10 divs and then control each cell within every 10s with code: .blog div:nth-child(10n + 1) { grid-row-start: span 2; grid-row-end: span 2; grid-column-start: span 1; grid-column-end: span 1; } This way we can order / sort / filter / paginate grid without gaps

[@timothyricks]

Nth child is another great solution! It really just depends on the needs of the project. Data attributes are useful when a certain item needs to always be a certain size instead of relying on its order.

[@valdiszhvaginsh3825]

Thanks!

[@kevinkuliner7275]

Thank you for this tutorial! It works perfectly for my design! Can this same technique be applied to stylizing flex box direction? In my case, I want tall items to be stacked vertically and wide items to be horizontal. I used the same technique as above and it doesn't seem to be working for me. Any insight on this would be greatly appreciated, and keep up the amazing videos! Update: I managed to get it to work! The attribute was being placed on the wrong element, but now it works plus some other custom attributes I made. Thank you again for making this eye opening video that’s literally gonna take my website to the next level!!

[@jelenajovanovic1472]

Tnx ❤

[@leonstoel9028]

Hi Tim, Great Idea and Tutorial! Is there a Wway to also affect the name of the dynamic attribute? We can only set the value, for some cases i would like to also set and not set some attribute names. Some integrations and custom code solutions would really benefit from the possibility to have attributes only show op on certain cms items. thank you so much for your content tim!

[@Iastrebner]

Always amazing, Timothy! Do you think there is a way to make this draggable and infinite? Trying to create an infinite grid that can have multiple sizes from CMS and that can also be draggable.

[@angelicojohnrago2878]

How about if its multiple images field?

[@nickjones605]

Almost exactly what I was looking for. Would it be possible to add a lightbox feature when clicking the photos?

[@favouraderemi1933]

Webflow wizard ✨️

[@kendallross5703]

As usual you're a mad lad! I have two functions of this on my site. The first funtion works perfectly as shown in this video. But now I'm trying to apply the same logic to my multi reference gallary images for my portfolio, the work flow obviously is slightly different. Any advice?!

[@dereksoup]

Genius!

[@altingrc1924]

Genius

[@shaneveldhuizen2094]

I find myself just shaking my head and saying to myself, "of course..."

[@aaqadasi]

Can you make a tutorial on creating a custom product review for Webflow e-commerce website?

[@konstantinbodnenko5842]

Hello Timothy! It doesn't work inside e-commerce products collection. The purple point that allows to connect the attribute value to cms field is disabled

[@dozax2824]

Timothy, can you tell me, if there is no pop-up that pops up when you select a value for a custom attribute, how can you tie up a custom field in this case?

[@lucasmpr]

This came up right when I needed it. Thanks a lot, Tim! Q: what if I don’t want to manipulate the style of an item through the CMS field, but want to always force my 3rd, 4th, 5th and 6th items shown on the cms list pagination to have that wide layout applied? Is there a code snippet to do that magic?

[@timothyricks]

So glad this helps, and good question! If you want only the 3rd, 4th, 5th, and 6th items in the list to have that style, you could do something like this. .your-cms-item:nth-child(3), .your-cms-item:nth-child(4), .your-cms-item:nth-child(5), .your-cms-item:nth-child(6) { grid-column-start: span 2; grid-column-end: span 2; grid-row-start: span 1; grid-row-end: span 1; } Or if it needs to be a repeatable pattern like every 3, 4, 5, and 6 out of 8, you could do something like this. .your-cms-item:nth-child(8n + 3), .your-cms-item:nth-child(8n + 4), .your-cms-item:nth-child(8n + 5), .your-cms-item:nth-child(8n + 6) { grid-column-start: span 2; grid-column-end: span 2; grid-row-start: span 1; grid-row-end: span 1; }

[@lucasmpr]

This is great! Thank you ❤

[@dickyjiang]

🎉 smart 😎

[@dimka_tregubov]

Omg🤯🔥🔥🔥

[@goulielmosdermon]

The effect doesn't work on my project. Does anyone know why could that be? I am a bit confused with why we use the embed and if I need to do something to that as well.

[@hamodi20091]

🤩

[@OAGMedia]

Thank you so much for that amazing tutorial, but on the version webflow has now (29.06.2024) there is no "dense" option. Can you tell us where to find or how to fix it maybe with additional css code? Br

[@timothyricks]

So glad this helps! The dense button is still there. It just looks different now. It’s the third, final button under "Direction" in the style panel.

[@MarkFaamaoni]

WOAH

[@user-uu5hn6zn4t]

Can I do that without editing the code? I want to put my CMS collection in grid mode but I don't want all the images to be the same size.

[@declanpodmore875]

Is it possible to do something similar to this with multiple items on a single cms item like a portfolio project?

[@nickjones605]

this was my initial question, too. I'll probably be going with this option although it's not ideal - I'd prefer to house all of the images from a portfolio in the same CMS collection as all of the other portfolio info.

[@user-ni4br6fu2b]

Is it possible to choose between an image or a video thumbnail?

[@timothyricks]

Yes, that should be possible natively with a switch field and conditional visibility to hide the image and show the video when the switch is on or if the video field is set

[@FernandoComet]

Oh! I used this and worked perfect but then client wanted a filtering system so my grid broke :(

[@Wiaarawr]

Is there any another way to do this without code embed?

[@user-uu5hn6zn4t]

I'm wondering the same :(

[@crissmoralest]

I don't see the dense option in the new interface of webflow. Can someone tell me where can I find it?

[@OAGMedia]

same here. searching for that setting.

[@moe-alhakeem]

If anyone should go to heaven it should be you my friend!

[@olivermusic8774]

realy cool tutorial .. but only works with paid version :D

[@napu52]

nasheee

[@user-dj8gt6ik7c]

Dang...it's not working. What did I miss...?

[@user-dj8gt6ik7c]

Update* deerrrrpp!!! I had my code wrong. instead of correct: check your code everyone!! :p THANK YOU Timothy this is fabulous and so easy to follow.

[@themadute847]

You don't know how many damns I've said while watching this

[@finnbrennan-bohm7109]

you skipped over alot in the begining like how do i setup my cms collection. this wouldve been perfect :(

[@productguiderhero2324]

Amazing

[@jesuspastr]

Thank you very much! This tutorial has helped me a lot! Greetings from Peru, the Webflow community is growing little by little here.

[@timothyricks]

I’m so glad this helps! Great to meet you!!

[@thompson.studio]

now do Framer. :) But, seriously. It's frustrating me to no end. Should've gone with webflow.

[@RafaelDiGuglielmo]

​ @timothyricks is not working for me! I don't know if I am a stupid hehehehe.