Ultimate Guide to Webflow Grids

About the update

Get the cloneable for this project (affiliate link)

Join my Webflow Wizards Community

[dimka_tregubov]

This is exactly what I am doing right now in the current project! Thank you!

[jeremyleroux]

this is excellent, this system can be applied really to any existing style system by creating these few grid elements and adjusting as needed. Brilliant.

[kjwessa]

I've always liked your approach to Webflow, and the vision of Lumos seemed like a great alternative to Client First, Knockout, and The System. That said, I echo the confusion of others with this update, almost as if 2.0.2 should really be called 2.1 (2.0.2 projects won't look anything like 2.0.1 projects).

We (in the community) crave systems so we can focus on our clients, and you are a master at working around Webflow's quirks. Now that we're stacking classes for everything, even if the changes are warranted, the developer experience is starting to feel like the other systems. Said another way, with this change, I'm not sure how I could sell a client on this over Client First.

I love your work, but this is the first time I've felt conflicted about putting it into my next build.

[alexv]

Stoked to see the adoption of Webflow's native capabilities. I will say - it's a bit tricky to keep up with these updates to Lumos on top of Webflow's changes. I want to keep using Lumos but there isn't any documentation or general tips on how to migrate from v1 to v2 or v2.0.1 to v2.0.2...

Is there any sort of plan to create content or documentation to cover this? If you need help with it - I'd be happy to help.

Thanks Timothy!

Edit: I'm just finishing up this video and the use of customer properties and grid is the most powerful update to Lumos I've seen.... EPIC!

[sazatornill]

Great stuff! What would the best way of applying a utility custom grid and define different column spans for each child?

[dennishallmen]

Great video as always Tim!

I saw that all the typography embeds are removed, how does this affect how we style tpography? Before if I hade a bit of text I could add ”—fs7.2-fw2” to the class to give it the small paragraph size with a medium weight. How would we do it now?

Maybe you have a video planned for this topic?

Also, will all versions of Lumos still be available or only the latest?😁

Thanks,

[sylviomurer]

Hi Timothy, I'm working my way through your videos and notice that the fog is slowly lifting. But I do have one question. In the current Lumos version it works a little differently. I have seen that the entries are now in the custom code (page_code_base). If I now duplicate the utility u-grid-custom at minute 1:11 and then rename it to u-grid-column-3, it doesn't do it, but displays the message "Class exists". I also no longer have the version: repeat(3, minmax(0, 1fr)); but: var(--grid-3). The variables are now linked. I just want to understand what was the reason why the duplication and renaming works for this video and now it doesn't work for me anymore :-)

[mariuszjankowski]

I have a question, how to update version 2.0.1 to version 2.0.2? I started the project on 2.0.1 but I have it completed in 30% so is there a chance to switch to the new version without a huge amount of work? Is it enough to remove EMBED Typo Code, and manually map the class names (u-dispaly for example) in StyleGuide and add attributes to them? As for EMBED Layout, I understand that now we just add the corresponding Utility Combo class and manually add custom attributes such as minmax() etc? Nothing seems to have changed in the Variable Panel as far as I can see as well as the rest of the EMBED Code?

[weezyf]

tim! It would be AMAZING if you could do a video covering CMS hover states that utilize the multi-image field dynamically. For example, hovering over an item card will cycle through the multi-images one by one, Some collection items may have 4 images other may have 10. Then hover off will reset to the original thumbnail.

It's such a common interaction for online shops, yet i cannot for the life of me find a tutorial.

[jakobsedlar]

Hey Timothy, great to see that Lumos is always improving. I am using Lumos for a new project of mine. However, for the layout of the project, I have to stick to units that scale like em. I wanted to ask you whether you think that em is still the go-to unit for vw-related responsiveness or if there is something better, especially when using your Design System? Would you suggest using em for bigger headings and sticking with rem for paragraphs?

[leonstoel]

Hi Timothy,
Super Interesting, once again. And very nice to learn all those things i can finesse with custom attributes in css grid.

Though i really liked the approach lumos had before in V1 and V2. Could you potentially see it mixing at some point? I mean workflow wise to not have these utility classes but rather have them written in code to apply them like font styles (--fs7.1) and so on.

Also the thing with now being desktop-first has me somehow sceptical, but i get your idea from the comment that @sachinrao wrote.

cheers timothy, really interesting work as always!

[louissmithbmx]

Do you use subgrid on client projects? The subgrid score on ‘can I use’ is 86%, however, Chrome for android browser implemented this feature in April. Do we need to wait a bit longer for people to update their browsers? I think their browsers update automatically if you have the setting on. 🤷‍♂️

[Itslogicee]

Absolute legend. In regards to your recent video on css animations, for site animation, what practice would you recommend first?

Such as gsap via a code sandbox or natively within webflow etc?

Appreciate you brother!

[jordiklavers]

I liked the Lumos framework because it didn't allow for Webflow to create custom ID's for every grid child. Now that you're using the webflow css grid, how does Lumos handle the Webflow ID's being generated, or are they generated at all?

[labruda]

The option of selecting the "First Item" of the grid is possible thanks to the Lumos extension or is possible with Webflow inbuilt features?

[gamalieljustinflores]

Hi Tim! Any tips or tutorials to make a 2 column grid and I want the right side start with a negative margin so it looks uneven or make the first column start on second row?

[AkashChoudhary-oj]

how did you change color of webflow guides ?

[sachinRao]

Hi timothy this is desktop first approach what if one wants to adapt mobile first?

[kafiahammed]

but i have't see this grid custom add feature in my webflow. 🙄

[jeremiask.]

Hey love the solution with custom properties, this really helped me building my site!

Unfortunately I have a problem with the responsiveness on smaller viewports. Everything resizes probably when viewing it in preview but the published version is not working correctly, pictures are very small as soon as it gets smaller than the desktop viewport.

Has someone a solution or an idea what could cause this problem?

Really want to publish my site :(