Ultimate Guide to Webflow Grids

About the update
github.com/lumosframework/lum...
Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=l...
Join my Webflow Wizards Community
/ timothyricks

[@dimka_tregubov]

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

[@jeremyleroux8108]

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.

[@timothyricks]

Thanks so much! I’m glad this helps!

[@hz3287]

perfect timing thanks big bro

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

[@timothyricks]

Thank you! This is really helpful feedback

[@kjwessa]

​@@timothyricks Thank you for your hard work to build Lumos! Using Webflow since 2019, I was close to heading a different direction for client builds until you started releasing Lumos videos. Their addition of variables only increased my interest, and the 2.0.2 update captures that well. I was bummed to lose the --7.1-tw1-fw2 type syntax, but I threw myself into 2.0.2 for the last 40 hours and see the power of what you've built. I just hope you continually find innovative ways to utilize that plugin (that thing rocks). Thanks Timothy!

[@101alexv]

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!

[@timothyricks]

Hi Alex, great question! I'm building several sites with Lumos v2.0.1 right now, and I plan to keep building them with that version instead of trying to upgrade them. Once a project's started, it's usually too big of a lift to reclass every layout that was created throughout the project to fit within the new system. But we can compare everything that was added and removed between versions using the changelog. github.com/lumosframework/lumos-v2/compare/v2.0.1...v2.0.2 In v2.0.2, the layout & typography embeds were removed completely. Once Webflow releases native color mode switching, the color embed will get removed completely, and if Webflow releases breakpoints for variables, the responsive embed will get removed. The goal is to make things as native as possible, but that means there will be at least one Lumos update for each Webflow release.

[@danplumadore647]

@@timothyricks In this case, is there a foreseeable timetable related to this? I am wondering if we should wait until further updates are done to Webflow which will result in Lumos updates..

[@timothyricks]

@@danplumadore647 They mentioned at Webflow Conf that they're working on native color mode switching, but Webflow hasn't given any timetable for this. And I don't have any personal insights into it either. I've considered pausing updates until everything's released, but any current sites we're building would be missing out on so many incredible features in the meantime. So I plan to keep on working with whatever they give us currently.

[@danielkrategl8512]

What an incredible challenge you are taking on here@@timothyricks! After building multiple sites with Client-First, MAST and Lumos, I strongly believe you are creating the superior system. Hoping that webflow will ship fast so you can polish up Lumos even more 💪🏻

[@danplumadore647]

@@timothyricks Very cool! In that case, we'll go with the flow. Thanks for the awesome work.

[@jakobsedlar2306]

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?

[@timothyricks]

Hi, I've been using the CQW unit lately for larger headings. It's better than EM or VW because it's based on the size of the container. Here's an example :) kzbin.info/www/bejne/pobRdGCXpZucrqs

[@jakobsedlar2306]

@@timothyricks Thanks, that makes a lot more sense :)

[@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!

[@timothyricks]

Thanks so much! I’m going to try to use css animations more, especially for hero sections so that the content is visible instantly. It probably won’t be able to completely replace GSAP though which will still be needed for more complex interactions.

[@Itslogicee]

@@timothyricks makes sense, thanks Timothy.

[@sazatornill]

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

[@timothyricks]

Thank you! The column spans can be set with custom properties on the children like grid-column-start: 2; and grid-column-end: span 4; In the most recent version, I’ve added more column utilities. So we could just add a class like u-column-4 to span 4 columns

[@sazatornill]

​@@timothyricks Thanks for your reply. I mean within a CMS collection list, defining each children's span within the 12 column grid (e.g. Row 1 - Child 1= 3 col span, Child 2= 7 col span, Child 3= 2 col span, etc...). Having for instance a 3 column grid with different widths per children. So far it seems I can only apply a utility column grid to all children in the collection list at once.

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

[@timothyricks]

It’s a built in Webflow feature :)

[@weezyf775]

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.

[@timdaff]

Nice. Very nice.

[@leonstoel9028]

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!

[@timothyricks]

Thank you for the great feedback! There’s a lot of new features like subgrid, autofit, span all, and more that the old utilities didn’t support. The old grid utility system filled up a whole embed so there was no space left for new features. The updated layout system is actually much more compact and flexible at the same time. Using native features in this case leads to less limitations and makes the system easier for others to understand. If you decide to try it, I’d love any feedback you have on it. The desktop first trade off comes with a lot benefits to make the switch worth it

[@timdaff]

I’m thinking I may use the 2.0.2 layout embed in a standalone component that can be switched on/off per page, will wait until I’ve built with 2.0.3 first though. The upgrade path from 2.0.2 - 2.0.3 is fairly significant. I found the upgrade from 2.0.0 - 0.1 - 0.2 was fairly easy thanks to the changelog. Happy to share my notes if anyone needs.

[@leonstoel9028]

@@timdaff 2.0.3 already? I noticed v2.0.2 yesterday with this video. I'd be interested to see the upgrade path or roadmap for lumo.

[@timdaff]

@@leonstoel9028 I may have my numbers mixed up mate!

[@timdaff]

@@leonstoel9028 whichever was the last to use layout embed is what I upgraded to. It’s quite simple when following the changelog

[@dennishallmen5428]

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,

[@timothyricks]

Thanks so much! There’s native utilities for text styles now. We could have a class like .hero_title.u-text-small and if we rename that stacked class, it will affect every instance of hero_title throughout our site the same way the grid utilities work now. We could create native utilities for font weight, but ideally we’d only have one stacked class, so the font weight can be overridden instead using the style panel the same way we override grid gap. Only Lumos V1 and the latest version of Lumos V2 will be available for cloning.

[@timdaff]

I think it would be good to have all versions available somehow, Ive got clones since beta 0.8 I think Tim, if you want any back 😂

[@timdaff]

Maybe not all versions* but post 2.0 would be good

[@timothyricks]

@@timdaff What would be the use case for that? I'm worried people may accidentally clone an older version. It still happens with Lumos V1 a lot. Would having read-only links for all the older versions work instead?

[@timdaff]

@@timothyricks very true. I think possibly for people migrating from multiple versions to the latest. Not really an issue for me

[@gamalieljustinflores5109]

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?

[@timothyricks]

Hi, you could give the first column a style of grid-row: 2 / span 1; so that it starts on the second row and spans over 1 row. Or you could give it a style of order: 2; so that it becomes the second item in the list without changing its order in the navigator.

[@gamalieljustinflores5109]

@@timothyricks do I add this in a custom css or I could add it to webflow’s grid properties?

[@timothyricks]

It would need to be applied as a custom property in the style panel.

[@mariuszjankowski3593]

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?

[@aesukltd]

Seconding this - I am in the exact same scenrario - advice would be great

[@timothyricks]

Great question! Here's a list of everything that changed from v2.0.1 to v2.0.2. I also just added this list to the changelog. Base Embed • "--lc1" through "--lc4" classes replaced with native "u-line-clamp-1" through "u-line-clamp-4" • "--pe1" class removed. Use native styling. • "--cf1" class removed. Replaced with native "u-full" • "--ca1" class removed. Replaced with native "u-absolute-full" • "--gd1" classes removed. Color Embed • [data-button-style="outlined"] renamed to [data-button-style="secondary"] Layout Embed • Removed completely • Added 5 native grid classes. "u-grid-custom, u-grid-autofit, u-grid-subgrid, u-column, u-column-full" Responsive Embed • Size values updated for the tablet breakpoint Typography Embed • Removed completely • Added 10 native font style classes. "u-display, u-h1, u-h2, u-h3, u-h4, u-h5, u-h6, u-text, u-text-large, u-text-small" Other Changes • "container" class renamed to "u-container" throughout the project • "rich-text" class renamed to "u-rich-text" throughout the project • Example Layouts and Styleguide Pages updated to use new grid and typography utilities

[@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. 🤷‍♂️

[@timothyricks]

Yes, I’ve been using subgrid in client work. It’s supported across all major browsers. Usually, I turn grid off for mobile regardless so subgrid is only needed on larger screens. I just check to make sure my layouts don’t look broken for browsers that don’t support subgrid. The differences with subgrid disabled are usually minimal depending on the design.

[@louissmithbmx]

@@timothyricks Thanks Timothy! I’m using this in my next project.

[@sylviomurer7915]

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

[@timothyricks]

Hi, great question! In the latest version, there’s already a u-grid-column-3 class by default. So instead of duplicating the u-grid-custom, we can just use or edit the 3 column grid that already exists. The new var(--grid-3) and other grid variables make the settings easier to recall when adjusting the grid across breakpoints, they create slightly less code than referencing the full repeat function each time, and in the rare instance that we’d want to globally update the repeat function across all grids, it gives that flexibility.

[@jeremiask.4295]

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

[@timothyricks]

Hi, do your images have a width: 100% applied? Webflow serves different resolutions for our images on the published site so if they’re relying on their auto width, they might not fill all the space.

[@brandocean6322]

🐐

[@sachinRao15]

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

[@timothyricks]

That's a great point! Being mobile first was the main advantage of the custom code utilities, and that's not possible when using native utilities sadly. The native utilities can do a lot that custom code ones couldn't do though which I believe makes the trade off worth it.

[@jordiklavers9491]

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?

[@timothyricks]

IDs are only auto-generated on children when the parent's base class has display: grid applied. Stacking a grid utility on top of a custom class prevents Webflow from auto-generating IDs. When setting grid-column & grid-row through custom properties, it's completely tied to the class name of the element, not an ID.

[@jordiklavers9491]

Wow! I didn't know that, that's amazing :) Unlocks so much! @@timothyricks

[@user-xp6hy2gi2d]

how did you change color of webflow guides ?

[@timothyricks]

These guides are created with divs in Webflow, and their background color can be set to anything. I have an example of the Grid Guides component in my Lumos Cloneable webflow.grsm.io/tricks?path=lumos-v2-beta

[@user-xp6hy2gi2d]

@@timothyricks ooh , thanx man !

[@kafiahammed3548]

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

[@timothyricks]

It's under custom properties at the very bottom of the style panel. We can add any grid settings we want there.