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

TL;DR
  • Open the Canvas Settings via the gear icon in the Designer.  
  • Adjust the grid overlay’s columns, gutter width, and margin width to customize the visual guide for alignment.  
  • Toggle the overlay on/off with ⌘/Ctrl + Shift + G or from the View menu.

You can adjust the column and gutter widths of the guide overlay in Webflow using the Canvas Settings panel. This affects how the built-in grid overlay appears, helping you align content visually.

​

1. Open Canvas Settings

​

  • Go to any page in the Designer.
  • In the top-right corner, click the gear icon next to the “Preview” (eye icon) — this opens the Canvas Settings panel.
  • You’ll see a section labeled Grid Overlay.

​

2. Adjust the Grid Overlay Settings

​

  • Columns: Set the number of vertical guides used in the overlay.
  • Gutter Width: Define the space between columns (the “gutters”).
  • Margin Width: Adjust the spacing from the edge of the canvas to the first and last columns.
  • These changes affect only the overlay, not actual layout elements unless you manually match your layout to the grid.

​

3. Enable/Disable the Overlay

​

  • To toggle the guide overlay on or off, press ⌘ + Shift + G (Mac) or Ctrl + Shift + G (Windows).
  • You can also access this from the View menu in the top toolbar of the Designer.

​

Summary

​

To adjust the guide overlay’s column and gutter widths, use the Canvas Settings found via the gear icon in the Designer. This helps you align elements based on your preferred grid without affecting live site structure.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make the hero section in Webflow fill the browser viewport perfectly regardless of the height of the browser window?
How can I hide the scrollbar line that appears on my Webflow site when I have a horizontal scroll with Auto on mobile?
How can I dynamically display the current year in the footer of all my Webflow sites?
What are the key features of Webflow and how can it be integrated with third-party tools and services?
What could be causing the big white border when setting the overflow setting of divs to scroll in Webflow?
Why do users receive a "Passwords cannot be collected" popup when attempting to log in or sign up on our published Webflow site?
How can I make the block in Webflow containing hidden text grow to the same height as the text itself when the button is clicked, without pushing other elements?
I'm trying to add a script to my Webflow website, but it's not working. I added it to the header, but nothing happens when I test it with my IP address. Any solution? I'm not very familiar with JavaScript, so I'm not sure what's wrong.
How can I create a Webflow navbar with a transparent background that changes to black after scrolling, similar to a specific website? Additionally, how can I achieve the same background video effect?
How can I create a smooth transition for an infinite marquee slider on my Webflow website?
What is the new feature that Webflow has announced for dividing layout/text into columns?
Why can't I add a checkbox inside a dropdown widget in Webflow? And how can I create a multi-select dropdown with an expanded view in Webflow that allows the user to select multiple options without relying on the Cmd key?
What is the current best workaround in Webflow for adding a "select country" list into forms, without using ecommerce and considering limitations on maximum number of items and characters for custom code?
How can I implement "Invisible reCAPTCHA" on all forms in my Webflow site? Is this feature supported? Where can I find more information about it? Thank you in advance for your help!
Can Webflow provide Android scrollbars? How can they be implemented?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?