Fixing The Webflow Grid

[@SepulvedaCarlos]

As always... you are fixing my knowledge of CSS :)

[@traviscoy]

Webflow slowly turning less of a “no code” tool. Great content as always 🙌

[@timothyricks]

It's a great thing though! More flexibility, better end result. 🙂 Thank you!

[@rohitjawale777]

Exactly

[@tjk_9000]

in fairness, you can get a decent site up with no code and pros can have their cake too. win win.

[@traviscoy]

totally true! @@tjk_9000 🙌

[@melessify]

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.

[@bibiri778]

This information is very important to me and I am very happy. Thank you so much for your the valuable information.

[@benvindadossantos2092]

Great material delivered in the simplest way possible. Thank you!

[@olliemcmillan]

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 :)

[@timothyricks]

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.

[@alialkofee1]

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.

[@jdanielortega]

Outstanding content as always, thank you Tim !

[@timothyricks]

Thanks so much!

[@zerz99]

Crazy good stuff! Thank you Timothy!

[@timothyricks]

So glad this helps!

[@corneromme]

What’s your opinion on the new style panel UI Timothy?

[@DanielDesigners]

I am interested as well!

[@timothyricks]

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

[@fiserk9989]

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

[@shpekov]

and dont forget to pay

[@fiserk9989]

@@shpekov I did pay

[@vigneshwarks8173]

Can you please explain how to hide the grid column in webflow?

[@danielapro9755]

Love this!

[@timothyricks]

Thank you, Daniel!

[@renatolz]

Dude! Wow! Thanks for this content 💜

[@timothyricks]

So glad this helps!

[@kyda__]

You’re the f ing goat bro 👌😁

[@geoschwa]

Awesome Tim. Can I ask where your accent is from?

[@valdiszhvaginsh]

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.

[@timothyricks]

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. kzbin.info/www/bejne/jHuTpKqBbdKVnZY

[@CarlosAndresVelasquez]

Hi Timothy, I cant find your tutorial on the To Do List Webflow cloneable. Do you think you can share it with me?

[@timothyricks]

Hi, sure thing! kzbin.info/www/bejne/hnS6hKuXeb13mLMsi=4kag2mnOC3Yil0GZ

[@thevectorbox]

Was thinking can we link this to CMS?

[@timothyricks]

Totally possible using data attributes, nth child, or the native first, odd, & last item selectors kzbin.info/www/bejne/jHuTpKqBbdKVnZYsi=6J1TYxGjJ_gs78Jp

[@rohitjawale777]

Webflow turning to No-code to Code, hence the core designers moving away and developers are joining. Great move webflow 👏 .

[@seankaveh]

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]

Thank you! The solution in this video should fix that. It's because the columns don't have a min of 0px.

[@seankaveh]

@@timothyricks oh amazing!! Can’t wait to try it out today. Thanks! 🙏

[@seankaveh]

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

[@timothyricks]

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

[@jayreambonanza1991]

We are now closer to front-end

[@AlecsStan]

He misspelled his name in his profile. His actual name is Timothy Rocks!

[@timdaff]

A+++