How can I eliminate the auto-generated columns in my Webflow grid setup?

Published on

September 23, 2023

To eliminate the auto-generated columns in your Webflow grid setup, you can follow these steps:

Select the element that contains your grid setup. This could be a div or a section, for example.
In the right sidebar, find the "Display" section and click on the "Grid" option.
In the Grid settings, you will see the "Columns" section. By default, there might be a number in the "Auto" input field, which indicates that the columns are auto-generated.
To remove the auto-generated columns, simply delete the number in the "Auto" field.
After removing the auto-generated columns, you can manually define the number of columns you want by adding numbers in the remaining input fields. For example, if you want a 3-column grid, you can set the "1fr" value in the first input field, "1fr" in the second, and "1fr" in the third.
You can also adjust the width of each column by adding different values (e.g., "200px", "50%", etc.) in the input fields. This allows for more customizability in your grid setup.
Once you have set the desired number of columns and their widths, you can further customize your grid by adjusting other settings such as grid gaps, alignment, and distribution.

These steps will allow you to eliminate the auto-generated columns in your Webflow grid setup and create a more custom grid layout.