Streaming live at 10am (PST)

CMS grid leaves first slot empty

Hello fellow Webflowers,

I have a weird thing going on with one of my collections. As display:block it works fine, but once I make the collection a grid, the first grid remains empty. As far as I can see, there’s no object that’s too big for the collection item. Does anyone have any idea what causes this? This concerns the page Blog Archive in the folder EN (live site: https://privacycompany-test.webflow.io/en/blog-archive)

Thank you!


Here is my public share link: LINK
(how to access public share link)

1 Like

As you can see, there’s nothing there…

I’ve tried but without success.
Curious to learn the solution.

Thanks for trying anyway!

Anyone else wants to take a shot?

Same exact issue—bummed, because I have to use dumb workarounds for the time being.

I’m very bummed as well. It seems like this weird empty cell is the case in every single CMS collection grid I have, and in none of the regular grids, regardless of whether or not auto-fit is enabled… This means I cannot use display:grid whenever it concerns a collection.

Having this issue as well… Going to try moving to Flexbox, but it takes a lot of the gas out of Grid 2.0 for me.

Hi @Tessa and fellow Webflowers!

Here to provide a solution for this issue of the first grid area being empty. It seems to be happening because the collection items have a float property of left. Once this property is removed the first grid area is no longer empty.

I’ve created a short video to further clarify using Tessa’s example: https://share.getcloudapp.com/NQueBeyl

1 Like

Hi John,

Thanks for taking the time to explain this! I got it to work on one page, but on other pages it didn’t work as expected yet. I was in a bit of a rush (website needed to be published yesterday eve), so for the time being I have put it back to flexbox wrap, and I’ll check this out better once the dust has settled down. In any case, the float: left turned out to cause a minor alignment issue in those overviews, so you helped me fix that :blush:

Thanks again!

Hello! :slight_smile:

In the “Collection Item Settings” you need to set the layout to full width.

This worked for me.

17 Likes

Hello I have the same issue except my empty item appears in the middle of the collection list. I tried changing images, removing the item all together and still the issue persists. Does anyone have any idea how to solve this?

Here is the link: https://mindspace-2020.webflow.io/works/7up-fido-dido

Actually your suggestion worked for me really good. Still not sure why we are having this problem at first place.

Thank you

I had this issue as well. I didn’t have floated elements, and my items were set to full-width. What appears to have solved the problem for me, was to set the grid items to manual. Once I clicked it, the first cell got populated :slight_smile:

1 Like

Thanks a lot Emil, this worked for me too!

I had the same problem and fixed it with your help.
I couldn’t change the float property, but setting the layout of the “Collection Item Settings” to full with worked perfectly!

Thank you so much for sharing @Emil_Kovacs!

This worked perfectly. and I also agree with Rahman. The should be default behaviour when you add a CMS layout to a grid.

Thank you Emil, this worked a treat. Legend.

I had a similar issue. After watching all the videos, reading all the threads, and trying everything I could think of, I realised that I had applied the conditional visibility to the List Items rather than the Collection List.

All filters should be applied to Collection Lists.

I hope this saves someone the time I lost. :+1:

Hi! I’ve encountered the same problem and noticed a few things.

~ It was only happening on my containers, not sections
~ The “float” method did not work for me, but I didn’t have a CMS collection in my grid so I couldn’t say. I just know known of my content inside the grid was on float, so I couldn’t apply that practice.
~ **It was resolved by dragging in a grid from the left panel into the container, instead of converting the container into a grid from the elements panel on the right. (not sure why this was, but it worked)