CMS grid leaves first slot empty

Tessa · October 24, 2019, 8:12am

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)

Tessa · October 25, 2019, 11:10am

As you can see, there’s nothing there…

flpdcz · October 25, 2019, 11:48am

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

Tessa · October 25, 2019, 1:35pm

Thanks for trying anyway!

Anyone else wants to take a shot?

joshchamberlain · October 27, 2019, 11:04pm

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

Tessa · October 28, 2019, 12:34pm

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.

LorenzoThaGreat · November 1, 2019, 7:25pm

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.

johnramos · November 8, 2019, 5:43pm

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

Tessa · November 13, 2019, 10:35am

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

Thanks again!

Emil_Kovacs · December 8, 2019, 11:11am

Hello!

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

This worked for me.

Lama_ASSAF · March 18, 2020, 7:11am

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

Rahman · June 3, 2020, 11:26am

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

Thank you

Ildiko_Gaspar · July 14, 2020, 3:56pm

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

Arthur_Vu · November 12, 2020, 10:23pm

Thanks a lot Emil, this worked for me too!

alex-design · November 26, 2020, 3:17pm

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!

Cillian_Pender1 · January 13, 2021, 11:38pm

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