Amazing! I use MAST which uses flex to mitigate the code-bloat from using Grid but seeing these overrides with custom properties is sick! Thank you for another useful video :)
Thank you! I really like grid because items can span over both columns and rows. Plus, it allows us to give custom class names to layouts for easy reuse & global updates.
@@DanielDesigners It's an improvement in a lot of ways. I like the new display settings like inline-flex and inline-grid. The flex controls are really easy once you get used to them. I like the arrows instead of "horizontal" & "vertical". Those words didn't match the css values being applied anyway. I just don't love the flex wrap dropdown. Vincent Bidaux showed me a mockup where all of those options could have been handled with four toggle buttons, "→", "↓", "wrap", "reverse" instead of a long dropdown.
Dude.. Im so lost on how you made the colored blue grid to cover the page from top to bottom. I get the first part of setting the grid but then it just fast-forwards to a colored grid that is finished and I feel like there are steps missing here.
Thank you! But is it possible to use this method with Collection List? Because if I use this method, I can't assign different classes to Collection Item. The example shows not with dynamic collections, but with static blocks.
Yes, it is! Webflow has first child, last child, even, and odd selectors we can use on collection items natively. Or we can use css nth child to create a repeating pattern or data attributes linked to cms fields to give full control over which items have certain styles. ua-cam.com/video/VJ0swK8mbg4/v-deo.html
For some reason, whenever I try the span property on a child of the 12-column grid, the columns shrink and don't fill the width of the grid. I even tried it on your cloneable and got the same result. I wish this method worked properly.
Great insights! Love this… now if only there was a way to fix how Webflow previews grids in the designer so it doesn’t cut off the viewport 😢. Half the time I can’t even see whole columns on my base desktop breakpoint until I go to preview mode and it snaps back to the viewport
@@timothyricks I've tested it now and it does generate the same output result but in the designer preview it actually broke the layout as I'm previewing it even more hah. Once I've set the grid-template-columns in the custom properties on the parent grid, is it a problem if I'm controlling the child containers manually in placement of the grid?
@@seankaveh Oh, yes. The children would need to be controlled like the video shows. Or instead of using the custom property, you could manually set each column to a min of 0px. Either way should work.
Totally possible using data attributes, nth child, or the native first, odd, & last item selectors ua-cam.com/video/VJ0swK8mbg4/v-deo.htmlsi=6J1TYxGjJ_gs78Jp
As always... you are fixing my knowledge of CSS :)
Webflow slowly turning less of a “no code” tool. Great content as always 🙌
It's a great thing though! More flexibility, better end result. 🙂 Thank you!
Exactly
in fairness, you can get a decent site up with no code and pros can have their cake too. win win.
totally true! @@tjk_9000 🙌
Amazing! I use MAST which uses flex to mitigate the code-bloat from using Grid but seeing these overrides with custom properties is sick! Thank you for another useful video :)
Thank you! I really like grid because items can span over both columns and rows. Plus, it allows us to give custom class names to layouts for easy reuse & global updates.
This information is very important to me and I am very happy. Thank you so much for your the valuable information.
Great material delivered in the simplest way possible. Thank you!
Few months ago I jsut wanted to create a website for my photos and now I'm deep into webflow and never ending my site hahaha
and dont forget to pay
@@shpekov I did pay
What’s your opinion on the new style panel UI Timothy?
I am interested as well!
@@DanielDesigners It's an improvement in a lot of ways. I like the new display settings like inline-flex and inline-grid. The flex controls are really easy once you get used to them. I like the arrows instead of "horizontal" & "vertical". Those words didn't match the css values being applied anyway. I just don't love the flex wrap dropdown. Vincent Bidaux showed me a mockup where all of those options could have been handled with four toggle buttons, "→", "↓", "wrap", "reverse" instead of a long dropdown.
Crazy good stuff! Thank you Timothy!
So glad this helps!
Outstanding content as always, thank you Tim !
Thanks so much!
Dude.. Im so lost on how you made the colored blue grid to cover the page from top to bottom. I get the first part of setting the grid but then it just fast-forwards to a colored grid that is finished and I feel like there are steps missing here.
Thank you!
But is it possible to use this method with Collection List? Because if I use this method, I can't assign different classes to Collection Item. The example shows not with dynamic collections, but with static blocks.
Yes, it is! Webflow has first child, last child, even, and odd selectors we can use on collection items natively. Or we can use css nth child to create a repeating pattern or data attributes linked to cms fields to give full control over which items have certain styles.
ua-cam.com/video/VJ0swK8mbg4/v-deo.html
Awesome Tim.
Can I ask where your accent is from?
For some reason, whenever I try the span property on a child of the 12-column grid, the columns shrink and don't fill the width of the grid. I even tried it on your cloneable and got the same result. I wish this method worked properly.
Hi Timothy, I cant find your tutorial on the To Do List Webflow cloneable. Do you think you can share it with me?
Hi, sure thing! ua-cam.com/video/PCWSxaDXDbQ/v-deo.htmlsi=4kag2mnOC3Yil0GZ
Can you please explain how to hide the grid column in webflow?
Dude! Wow!
Thanks for this content 💜
So glad this helps!
Webflow turning to No-code to Code, hence the core designers moving away and developers are joining.
Great move webflow 👏 .
Love this!
Thank you, Daniel!
He misspelled his name in his profile. His actual name is Timothy Rocks!
You’re the f ing goat bro 👌😁
We are now closer to front-end
Great insights! Love this… now if only there was a way to fix how Webflow previews grids in the designer so it doesn’t cut off the viewport 😢.
Half the time I can’t even see whole columns on my base desktop breakpoint until I go to preview mode and it snaps back to the viewport
Thank you! The solution in this video should fix that. It's because the columns don't have a min of 0px.
@@timothyricks oh amazing!! Can’t wait to try it out today. Thanks! 🙏
@@timothyricks I've tested it now and it does generate the same output result but in the designer preview it actually broke the layout as I'm previewing it even more hah.
Once I've set the grid-template-columns in the custom properties on the parent grid, is it a problem if I'm controlling the child containers manually in placement of the grid?
@@seankaveh Oh, yes. The children would need to be controlled like the video shows. Or instead of using the custom property, you could manually set each column to a min of 0px. Either way should work.
Was thinking can we link this to CMS?
Totally possible using data attributes, nth child, or the native first, odd, & last item selectors
ua-cam.com/video/VJ0swK8mbg4/v-deo.htmlsi=6J1TYxGjJ_gs78Jp
A+++