With native CSS grid layouting, it’s straightforward to set up a classic 12-column grid layout. It’s great that Webflow supports this too, so it’s easy to create a grid where grid gaps always neatly line up with all possible cell size combinations.
The problem
In the editor, even when you set the column size to 1fr, the browser inspector shows that Webflow sets it to minmax(75px, 1fr). With a default grid gap of 16, the empty grid gets rendered at (75+16)*12=1096 pixels, beyond the default container width of 960px. In case of e.g. tablet view, where you might still use 12 columns, it gets worse. It may not just spill outside of a container, but depending on the browser window, run out of the designer viewport.
Proposed solution
I understand the empty state this is handy so the grid cells are visible when no content is inside, but maybe it could be a smaller number, like 25 pixels? This way, the empty cells are still visible in the editor, but will unlikely run over a container element.
@FilipSipos, I can see that Webflow may need to balance flexibility (any column layout at any size) with practicality (being able to see and select empty elements).
I’m bummed a 12-column grid layout doesn’t work with Webflow’s defaults (like the container width) and there is no way to overrule it.
Looking at the default breakpoints and sizes (like 16px grid gap), an empty placeholder of 30 pixels (still usable for touch UI too!) would work for:
A 12-column layout on desktop and tablet
A 6-column grid on phone landscape and portrait
I may be overlooking some requirement they have, but that would seem like a good balance to me.
Wel you can when giving the element that has display grid a width (for example 100%). Only a problem when you’re using the default container because you can’t set a width on that.