Incomplete columns and rows in Collection Lists

Design help General
1

Hi there - I’m using Collection Lists with CMS to show portfolio projects here, and the items aren’t properly lining up in all columns and rows. If you click on the “All” tab, you’ll see a gap in the first column of the second row.

Anyone know why this is happening? Advice greatly appreciated. Thanks!

Here is my site Read-Only: [https://preview.webflow.com/preview/erikas-first-project-f34634?utm_source=erikas-first-project-f34634&preview=4b381183b494062157c9033ca6ca3f3d][1]

1 Like
2

Hi @erikaharano, thanks for the good question. Collection items do not auto-calculate variance in collection item height between items. That variance can cause whitespace which causes the grid to misalign.

The fix is to assign a height to your class assigned to the Collection Item. Once you do this then the grid will be aligned as all items have the same height.

I hope this helps.

2 Likes
3

@cyberdave thanks for your help and for the explanation! that seemed to do the trick.

2 Likes
4

Since it has been 2 years already for this post, I wonder if there is any a newer trick for that issue?

5

@cyberdave Thanks so much for this! You’ve made my life a lot easier.