So I’m just starting out with using webflow and I’m trying to use Grid, but it’s not working how I feel it should.
When I create a grid and add elements to the grid, the first grid area is always empty. See video.
Can someone tell me what’s going on here and how do I fix this?
The issue only happens when the grid setting is applied to the pre-built container element, and has proven difficult to figure out.
You can use any other element with display: grid. So you could either make the container with a normal div block, or drag in the Grid element into the container, which will work without issues. Rest assured, this is on us and is actively being worked on.
So happy to have stumbled upon this! I had a bunch of grids on a site that were driving me nuts with that empty box and ended up having to set them all to manual. Never would have guessed it was because of the container. Am now able to finally to go back to the magical world of “auto.”
I just had it happen on a normal grid element. This is a showstopper. You guys need to fix your architecture or whatever causes these absurd abnormalities. This topic comes up constantly, and your PMs or designers or just simply anyone does nothing about it.
This WAS fine, then I added a button, as soon as I styled it, the whole thing shifted as if there was content in the first grid cell. So, desperate I put the button in a “blank” unstyled div and then it worked. NO CLUE WHY. These kind of inexplicable glitches seem to happen constantly… you guys seriously need to start addressing these UX issues.
OK, as alluded elsewhere, as no one cares to explain, my base button class had float. However, frustratingly… totally nonsensically, when a button is INSIDE a grid (or anything I would imagine), the float property no longer is accessible. I had to take the button outside the grid, give it a subclass, and then make the subclass cancel out the float, and then put it back into the grid.
Hi @rps I have done video for you where I try explain why is this correct behaviour and I also pointing some issues that WF have with correct rendering.
I am having a similar issue to the original post. The first grid area is missing the photo on my published website, I have tried moving the grid content around and it is always the first box that is missing the photo. It is visible in preview etc but it does not show up when published.
If this is helpful to anyone, I have “sort of” identified what’s causing this and “sort of” have a work-around.
When Grid is applied to certain Webflow elements (as discussed, Containers, and I have also identified Link Blocks falling into this category), the class ‘.w-clearfix’ is inexplicably added to that element whether or not the ‘clear’ attribute has been employed anywhere in the structure. That element adds :before and :after pseudoclasses that contain a ‘content: " "’ attribute — in other words, it’s forcing a single space into an invisible “cell” before your first actual content. As far as I can tell, this is a bug, plain and simple.
The (sort of) work-around is adding custom CSS to the ‘head’ element of your page to undo the ‘w-clearfix’ addition. It should look something like this:
The all-caps text above should be replaced with whatever the class name is for the container in question — i.e., if your Link Block has a class of ‘my-link-block’ then that’s the text that should appear there. As you may already know, this won’t change anything within the Webflow Designer, but the errant empty cell will disappear on your live site.
Hello Everyone!
To Turn collection list in to a grid We change the display settings to Grid
to achieve n column layout.
But We might have changed the layout settings of the parent container (Collection List Wrapper) which causes this problem.
By changing it back to full width this problem would be solved hopefully.
Before
