Edit Guide Overlay / site grid system

Hello!

When I turn on ‘guide overlay’ in the bottom of the left panel, grid/guide columns are displayed on top of my design. Where can I edit the column and gutter widths of this ‘guide overlay’?

Thanks :slight_smile:

2 Likes

I actually just found a post for 6 YEARS AGO where a Webflow “Alum” said they had plans to allow this to be edited in the future. 6 years! What’s even crazier is, I can’t even figure out what size it is now? Are the gutters 24px? 20? There’s no documentation I can find on this. Anyone know?

1 Like

And do you guys know how to construct layout within those guides? For instance, I have sections that expand all 12 columns, while some expand only 8.

yes running into similar issues right now and cannot find any documentations on this overlay. its sad because its so important for a clean work flow…

1 Like

December 2020 - I do not see that Guide Overlay icon on the bottom left panel. Does anyone know where I can find this now or have Webflow removed it permanetly?

OK. So I’m not going crazy…the grid overlay tool is gone! Can anyone explain why?

@desi9ner @mburlinson

As far as I know, they have moved it somewhere else:

Can’t access the designer at the moment so I can’t check if it’s still there.

I found it on the top center of webflow under ‘canvas settings’ (the px and %age of the canvas are shown, its at the bottom of that menu that pops up)

1 Like

Thanks man it was very helpful:)

I came across this thread and built a simple tutorial page showing how I install a custom grid using two classes (one on the body tag and one on the container tag). This is helpful if you want a grid that’s not the standard 960-pixel webflow grid. Please let me know if this is clear enough (it seems clear to me!)… but I’ve used this technique to match work developed in XD for various clients. I hope it helps someone here. Custom-grids demo

I cannot express how important it is for me to be able to edit the Grid layout to whatever I want. As a designer, one way to differentiate from project to project is simply by changing the grids. Sometimes it is 12, sometimes 8, 10, and so on. Also, sometimes I use 20px padding other times 60px. Everything changes from one design to another so my designs never look the same.

This should be a relatively simple feature to add and apply to the Webflows interface, if you need inspiration look at how Figma has done it. What they enable me to do is exactly what I require Webflow to allow me too - give me some freedom, not limitations and guidelines that I cannot use for anything. I want and need to be able to match grids both within Figma and Webflow, otherwise, your platform will just become another limitation to the general creativity.

Lastly, nobody wants a page that becomes “centered” from 980px they want a liquid grid and the page to scale up, if anything. With the latest screens being produced for laptops they run in formats around +1700px. Unfortunately, making your 980px a bit of a laugh.

I hope that you will fix this because I see this more as an issue/bug than something missing in Webflow.

Best regards,
Morten.

Hello, has anyone found a solution to editing webflow’s guide overlay ? It’s 2024 :flushed:

1 Like