0

I have set up a flex box containing a bunch of items. Five items make a row. The items vary in height. I want to get rid of the white space that is formed when the items of the next row are arranged to line up with the bottom of the tallest item in the row above.

This is what my code looks like: 

#archive {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.item {
    width: 20%;
    position: relative;
    height: 100%;
}

This is a screenshot to illustrate the issue.

I would be super stoked to hear about a solution to this problem. Thanks!

konsulampulle
  • 1
  • try `height:auto` – Iman Emadi Apr 07 '20 at 14:30
  • You want the items on the second line to fill that space ? Or the elements above fill that space ? – Rainbow Apr 07 '20 at 14:31
  • 2
    "no way" (Or at least easy way) - this is masonry layout. I don't like any CSS approach and use - summarize here: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/. And use (Great plugin - fully support flexbox): https://masonry.desandro.com/ – Ezra Siton Apr 07 '20 at 14:37

0 Answers0