Random spacing between items in collection list/grid

[JoeyR (Joey Roulette)]

Hi, I have a collection list (styled as a four-item grid) inside a column. In the designer, the grid appears as I want it: four items evenly spaced together within a square.

But the published version shows random white spaces between the items. The first item has a long blank space below it, offsetting the structure of the whole grid. I don’t know why it does this and I don’t know how to fix it.

This is how I want it:

And this is how it looks like:

Here’s the read-only link: Webflow - Orlando DSA

---

Here is my site Read-Only: Webflow - Orlando DSA
(how to share your site Read-Only link)

[Dave_Birnie]

Hey @JoeyR,

First off, beautiful site. I am not sure if you partially fixed your issue, but for me, it appears only to be an issue in tablet mode.

What I would recommend doing is using a grid instead of columns. I am not sure exactly what is happening, but my suspicion is that the way you have it setup, it works with each one of your divs dynamically causing one to become a little too large to fit properly. A grid form will ensure that your content stays as you intend.

If you would like to view an example of a responsive grid you can check out my current WIP

[Kemi_Rufai]

Its the height of the individual collection items, they change depending on the device size.

To fix:
Set your height or min height to a particular size (e.g 300px) instead of auto