Eliminating Vert. Space Between Differently Sized divs

Hello again,

I’ve looked around into topics of this similar problem, but I couldn’t get any solutions to work. I’m having trouble on my “AVBotz Home” page for my club. Under the Latest News section, there is a flexbox div containing other “collection item” divs that have varying heights (b/c diff. img heights). The issue here is that the other “coll. items” below the three in the first row take the height of the tallest div as the next line (if none of that makes sense I have images to help below). I’ve tried working with Children wrapping but I haven’t found anything that works. If there is a way to have the divs below the first row fill the negative space below it in the same column?

I’d like my layout to look like this

As of right now it looks like this (the red is the space I’d like to get rid of)

Actual page

Preview Link: Removed by OP
Please Reference the “AVBotz Home” Page

Thank you all and Happy Holdiays!

Cheers,
Ethan

Hi Ethan,

AVB-card-hero-2

  1. Height: 100%, auto won’t work because the div needs a designation
  2. Display: Block or Inline Block

AVB-img-collect-wrap

  1. Height: 33%
  2. Display: Block or Inline Block

Collection List

  1. Wrap Children

When you finish these steps, all your collections will be spaced nice and neat :grin: You can adjust the sizing of “AVB-img-collect-wrap” to a lower % percentage. Don’t adjust the images directly, let them fill 100% width and height.

If you get stuck, holler back and I’ll help ya.

1 Like

Thanks! Worked like a charm :grin:

Awesome! Have fun and great holiday.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.