Vertical gap between Collection List Wrappers in Grid or Flex

Hi everyone,

I can’t make the vertical couple of pixels disappear that seems to be stemming from the collection list wrapper or its nested parts (item and link). Grid and all div vertical margins set to 0. Anyone run into this before/have any ideas?

Thanks guys.

Alex


Here is my site Read-Only: https://preview.webflow.com/preview/gus-dp-staging?utm_source=gus-dp-staging&preview=8c6b1601713125f6349f5abac8c67c2f
(how to share your site Read-Only link)

Hey @amyerson12,

I did some poking around quickly… I didn’t get a chance to dig deep yet. But from what I could see at first glance everything looks okay. My only though is it’s something to do with using CSS Grid as the layout. It might make more sense to use Flex to layout the boxes like that.

It could be CSS grids row height causing issues as it auto generates them… just an idea. If that makes sense.

I’ll try to build a flex version of this hopefully later tonight!

1 Like

Hey @amyerson12,

You have to actually set a size on the Grid layout.
Use 180 px - or - 20vh.
That’ll do it :grinning:

http://www.screencast.com/t/KPtmnEdl

3 Likes

Coming in clutch!! :raised_hands:t2: Great answer & find!

Thank you so much Gary you are a lifesaver!!!

So relieved!!

1 Like

Thank you for your help Austin!!

1 Like

No problem, have fun! See ya.