Webflow sync, pageviews & more.
NEW

Where can I adjust the column and gutter widths of the guide overlay in Webflow?

TL;DR
  • Open the Canvas Settings panel via the eye icon, enable "Layout Grid," then click the gear icon to adjust columns, gutter width, margins, and max width.
  • Note: These changes affect only the visual overlay and not the actual site layout.

You can adjust the column and gutter widths of the guide overlay in Webflow using the built-in canvas settings. These overlays help align content visually inside the Designer.

1. Open the Canvas Settings Panel

  • Go to the left toolbar and click the eye icon (Canvas Settings) at the top.
  • This opens options for Guides, Layout Grids, and Overlays.

2. Enable the Layout Grid Overlay

  • In the Canvas Settings panel, toggle on "Layout Grid" under the "Overlays" section.
  • You will see the default column and gutter overlay appear on the canvas.

3. Adjust Grid Settings

  • Click the gear icon next to “Layout Grid” to access configuration options.
  • From here you can customize:
  • Columns: Number of columns in the overlay grid.
  • Gutter width: Space between the columns.
  • Margin: Space on the outer left and right of the grid.
  • Max width: The maximum width the overlay expands to.

4. Use for Visual Aid Only

  • Remember: These settings only affect the canvas overlay—they do not change the actual layout or structure of your site.
  • To actually control grid structures in your design, use Container, Grid, Flexbox, or custom Div blocks with manual spacing.

Summary

To adjust column and gutter widths of the guide overlay in Webflow, open the Canvas Settings panel, enable Layout Grid, and click the gear icon to modify columns, gutter width, margins, and max width for visual alignment purposes.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a designer-friendly method in Webflow for creating SVG animations, without the need for extensive coding knowledge or limitations in colors and resolution?
How can I create a CMS slider using pagination in Webflow?
Is it possible to have different product pages in Webflow that display specific information for each product, or are there any workarounds for this limitation?
Why is SEMRush reporting a 404 error on our Webflow website that includes our site URL followed by a colon ("/:")? How can we fix this issue?
Why are the items after the load more button appearing twice when combining the finsweet attributes 'CMS filter' and 'CMS Load' in Webflow?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
Why does hosting external resources on a subdomain not resolve the "Access-Control-Allow-Origin missing" error in Webflow? Is it because the Webflow site is not hosted on the same server as the subdomain and is only pointed to with an A record? Is there another solution or a way to set header policies in Webflow to address this issue?
Is anyone experiencing an Invalid Workspace Error with Webflow?
How can I remove or call third-party CSS on my Webflow website’s source code that I didn't add myself?
Can I add a span with a class within a h4 tag in the Webflow editor or do I need to edit the code manually?
How can I limit the file size of the Webflow file upload field to less than 10MB using custom code such as JavaScript or jQuery?
How can I hide these fields on Webflow if there is no CMS entry for them?
How can I make a button in Webflow append the URL and scroll down the page upon clicking?
What are the optimal settings in Webflow to enable scrolling within a div block?
Are there plans to increase the nest limit for nested collection lists in Webflow anytime soon? The current limit heavily restricts the functionality on listing type pages and affects the suitability of Webflow CMS for projects like jobs boards.
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?