CSS flex column wrap with no height pre-set and forcing of a number of columns

Question

Example code: https://jsfiddle.net/z7ybks9u/2/

Motivation: I would like to force a 3 column layout, WITH support for fixed width but variable height DIVS, wit layout efficiency that will not expose large "whitespace holes" between items. Since the number of elements is unknown, I cannot limit the height of the flex container.

Problem: without forcing the height of the flex container, I cannot see more than one column, as it just utilizes the vertical space it needs to fit all items in one column.

What I am forced to do:

gallery-height {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      max-height: 700px;   <-----  NEED TO DO THAT TO SEE COLUMNS BUT I HAVE TO SUPPORT UNKNOWN NBR OF ELEMENTS
    }

This is extremely hard to implement yourself. Have you checked out any masonry packages for this? — Andrew, Feb 26 '19 at 21:23
not yet, just wanted to make sure that modern CSS has no solution for something as trivial as I mentioned. — JasonGenX, Feb 26 '19 at 21:44
Turns out there is, based on that answer you got down there. I learned something new today — Andrew, Feb 26 '19 at 22:22

score 6 · Accepted Answer · answered Feb 26 '19 at 21:36

6

Dropping the Flex container in favor of column-count might help: https://jsfiddle.net/69nmwqag/

.gallery-height {
  column-count: 3;
}

Then I dropped width: 30%; on .img.

answered Feb 26 '19 at 21:36

Mike

251
1
6

CSS flex column wrap with no height pre-set and forcing of a number of columns

1 Answers1