Displaying 'CMS' in Third Column creates odd white spaces between items

Hi, I’ve had this for ages and I’m not sure what’s causing it.
Could anybody be able to help/solve my problem?

So I have a standard design portfolio site.
I have a thumbnail for each project and I use CMS collection to display them on my front page.
I’m using the appearing order of “Largest to Smallest” and I’ve made a special collection field where I can set a number for each project so that I can control the order of projects that appears on my front page.

So that has worked, but I have a problem with my display.
I’ve been using 3 columns for my desktop view and iPad view, but somehow, there is a gap between my 3rd project (from the top) and 4th project.
If I change it to 2 column view or 1 column view it disappears, but when I have it set for 3 or 4 columns those weird gap appears.
It also disappears when I set my appearing order from “Smallest to Largest”.

Could someone help me sort this out so I don’t have a weird gap in my 2nd row? (shown in pic)

If you could help me out, I would really appreciate it!

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

It looks like you have a couple of CMS projects which don’t have any data.

Ok. I checked that, and that’s not the issue.

I’ve been playing with the layout - number of columns etc. and sometimes there are some extra spaces, other times not. Very strange. I’ll play around some more.

When you change the sort order this problem appears to go. But I don’t know that this is a perfect solution for you, and I have no idea what would happen if we added more projects to the list


1 Like

Thank you for reply.
Thats was my guess as well at the beginning (two empty projects).

I’m glad I’m not the only one who finds it strange, it was bothering me because I couldn’t figure out why and felt that I maybe did something wrong. (I probably have anyways though.)

However, I added few more CMS projects today and also changed the numbers of the projects (to change the orders) and the problem seems to have gone away for a while but now it’s back…

Now those 2 empty spaces appeared on different row.
If you have any other suggestions that I can try out, please feel free to let me know…

Thank you so much for taking your time!

I’m having the same issue When I turn on Sort Order the space appears. When I turn it off, it’s gone.

@Mmmmm Have you tried using flex instead of block for your grid? When I switched the problem went away…for now.