3

Im trying to implement a "collage" layout with flexbox where elements of indeterminate heights but fixed width can be "left-floated" in a collage like style (kinda like pintrest) but Im having trouble getting the flex-items to absorb extra VERTICAL space.

HMTL

<div class="widget-wrap">
    <div class="widget"> <!-- these elements are generated dynamically -->
        <!-- ~ indeterminate amount of content resulting of varying height ~ -->
    </div>
</div>

CSS

.widget-wrap { 
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.widget {
    width: 33.33333%;
    margin-bottom: 0; /* my best guess */
}

RESULT

enter image description here

As you can see there are vertical gaps whenever one widget is larger than the others in the same row (I guess thats expected using align-items: flex-start) but I would like all items in subsequent rows to align themselves flush to item above them in their column like on pintrest.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
yevg
  • 1,846
  • 9
  • 34
  • 70

0 Answers0