Streaming live at 10am (PST)

Collection list items aligning with vertical gaps


#1

Hi guys,

webflow’s excellent tutorial videos have gotten me far but now I’ve encountered a real road block :sweat_smile:

In my two column layout the 1st column contains a collection list with items of varying height. In that first column I want to have 2 items next to each other. For some reason I just can’t get them to wrap and align vertically without gaps. I tried flexboxes with 50% width wrapped children and all kinds of variations but to no avail.

Does anybody know what I’m missing?

Here is my site. The page is: blog/blog-alle-artikel

https://preview.webflow.com/preview/kanzlei-waldraff-und-kollegen?utm_source=kanzlei-waldraff-und-kollegen&preview=95d3aa82115f6a6f1846f95e83d3b472


#2

@neomagic What is the final look you are trying to achieve? Are you wanting them to all be the same height? With flexbox you will always have that gap if your items are not the same height and your layout is working as flex box has intended. I think what you are looking for is more of a masonry grid if I am not mistaken. Take a look at this forum posts and see if they help your issue.


#3

Soo awesome, Sarah :grinning:

that’s exactly what I was aiming for!!! Thank you so much!

Now I’m left with only I minor “bug”:

The vertical distance between the Blog Post Previews seems to vary ever so slightly:

Leading to the first Preview in the second column having its mouse hover box glow effect cut off for some reason :thinking:


#4

Hmmm I am not sure about those two, I would go through and clean up any extra divs that you may not need and make sure that all of your margins and paddings are equal and set appropriately. If you are still having issues let me know and i might be able to help.


#5

Interestingly, on smaller breakpoints I find that the last Preview in column 1 tends to break off an spill over to column 2.

Might that be a clue?