Streaming live at 10am (PST)

How to toggle on design/layout grid

I know this is simple and i’ve seen a button for this in older Webflow versions in Youtube, but for the life of me I cannot figure out how to turn on a layout grid. I do NOT want to drop a grid on my webpage to build in, I just want the tiny squares spanning my entire design so that I can make sure certain things are lined up and spaced appropriately. The grid I am describing has no effect on the webpage, it’s just the guide to make sure my alignment and spacing is where I want it.

Hey @taylorjay,

Click on your Canvas settings at the top.

image

Thank you so much. I knew I would kick myself when someone pointed out the very obvious answer!

1 Like

Hello Everyone,
Is there any way to edit the guides in Webflow if you don’t want a 960px wide grid system, or if you wanted to customize the grid layout for other breakpoints?

If not, is there somewhere that you can look up the width of the Columns and Gutters at each breakpoint so I can set that in Figma?

Hi @Daniel_Soto if you really need a grid you can create your own as an element and place (possition) it on back. But IMO you do not need grid in WF once you have your design done as design will give you understanding of content structure as starting point and than use tools like CSS Grid or Flex to make it happened.

1 Like

Thanks @Stan
So as I understand it there is not build in functionality to adjust WF’s native guide system.
Also, for my specific use case My ECD will want to see pixel perfect matches with WF at certain breakpoints and I think a matching guide layouts with Figma and WF would speed that whole process up.

Would you know what the column widths and gutters are?

Hi @Daniel_Soto I do not understand your question what columns and gutters you refer? Any specific website or …?

Choosing grid type as 7, 10, 12 columns or combined grid as 6/4 is designer decision and depend on final design approach as well as if he/she use 8pt or 10 pt system for spacing. You can have pixel-perfect Icons or design on paper (Figma, Sketch, XD etc.) but when it comes to responsiveness of website things get ugly.

In order to develop a pixel-perfect website, you need to know your CSS. I mean really know it from inside out. You also have accept the fact that your code might get ugly for the sake of pixel perfection. Because you “need” that super fine control.

so my summary is you can show your boss pixel-perfect design on given max-width but as I have mentioned when come to website build things are more about compromises because of responsiveness.