▼
Streaming live at 10am (PST)

CMS grid leaves first slot empty

Design help CMS
#1

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
#2

56
Screenshot 2019-10-25 at 13.09.56.png1964×1126 239 KB

As you can see, there’s nothing there…

#3

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

#4

Thanks for trying anyway!

Anyone else wants to take a shot?

#5

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

#6

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.

#7

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.

#8

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
#9

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!

#10

Hello! :slight_smile:

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

Képernyőfotó 2019-12-08 - 12.10.46
Képernyőfotó 2019-12-08 - 12.10.46474×708 30.3 KB

This worked for me.

15 Likes
#11

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

#12

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

Thank you

#13

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
#14

Thanks a lot Emil, this worked for me too!

#15

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!

#16

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

#17

Thank you Emil, this worked a treat. Legend.