Edit Guide Overlay / site grid system


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:


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