I am using the grid layout and trying to set the maximum amount of 2 columns to show up on bigger screen, but it will automatically create 3 columns. Is there any way to limit the amount of columns to show up on bigger screen?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @Michio_Shindo 
welcome to the forum.
I could be wrong about this, but it looks like you have setup a responsive grid. Meaning how you’ve described it is how it’s supposed to work.
“Auto-fit is one of the most powerful features of CSS grid, it allows you to repeat and wrap columns automatically so that you can build a layout that works across every single screen size — no per-breakpoint adjustments needed.”
If you don’t want that then you should undo your auto-fit settings on the min/max and default tabs.
Then you can switch between breakpoints and manually add or remove columns for each breakpoint.
More: Design responsive grids.
If that doesn’t help maybe someone else can chime in.
As far as I’m aware the grid should only create additional columns if it has to. So you might have an item fixed to col 3, or you might have an item that spans several columns, and the grid is expanding to accommodate that.
That’s not how grids work.
CSS grid should only auto-create new rows or columns, beyond your N, M design spec, when it must do so to accommodate content. Under normal circumstances, that should only happen in the direction you specify, i.e. horizontal or vertical expansion of the grid.
However there is a gnarly bug in Webflow where you can fixed-position or span an item, and then delete the targeted grid columns. Webflow doesn’t warn you or clear those settings. Instead, the published grid will auto-create additional columns/rows to accommodate the item, with no obvious cause.
I’ve had to fix quite a few of those situations here.
Michio appears to have something like that happening with his grid, since it’s expanding beyond his content, and beyond his specified column count.
@Michio_Shindo can you share your read-only project link so we can have a look? At this point we’re just guessing why you’re seeing an unexpected 3rd column.
That’s not how a default Webflow grid works (or how I’ve ever experienced it), nor is it how the Webflow describes it working.
Yes grids auto create new rows when the content needs it, but setup a default grid and it’s always a fixed number of columns that you define per breakpoint.
New columns are not auto created under that scenario.
Responsive Grids
The way you change that default behavior, to fall in-line with what was just said (and what the OP describes) is by selecting “auto-fit” as is shown in OP’s screenshot.
Now columns are dynamically added and removed based upon your breakpoint.
What can also confuse people is that you can change that “auto-fit” setting per breakpoint.
So your largest breakpoint could have that turned on and dynamically add columns, where-as your smaller breakpoints could have that turned off giving you only a fixed number of columns.
Possible Issue
Without knowing more…
Seeing a screenshot with “auto-fit” turned on, and how it was described strongly suggests something like this. Of course it could still be something else, but that’s a solid guess based on evidence.
If you fixed position an item, a grid item, then its (essentially) removed from the grid.
That item is now positioned to the browsers viewport, no longer positioned to the grid.
That may be causing confusion.
As for spanning grid items…
I’ve not bumped into an issue when deleting a column that an item spans into (not to say there aren’t issues).
But I’d suspect, if that’s true, it’s due to another setting reacting with it.
One thing to note, if you remove a column and had any of the items in that removed column set to “manual” then it’s up to you to move them.
That too may be causing some confusion.
Hope that helps!
