Streaming live at 10am (PST)

Vertical gap between Collection List Wrappers in Grid or Flex

#1

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)

#2

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.

#3

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

1 Like
#4

Hey @amyerson12,

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

3 Likes
#5

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

#6

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

So relieved!!

1 Like
#7

Thank you for your help Austin!!

1 Like
#8

No problem, have fun! See ya.