What Is The Best Way To Create An Asymmetrical Two-column Grid With Dynamic Content?

I have dynamic content flowing into a two-column grid. Flex box is a nice solution, but it forces the rows to be the same height, creating some awkward white space when one has mor

Solution 1:

In your code, the flex items are aligned in a row by default (flex-direction: row). And also by default, flex items will stretch to occupy the full available height of the container (align-items: stretch) – thus creating equal height columns.

You could use align-items: flex-start to make each flex item stretch only enough to contain its content. But then, as you've noted, this doesn't change the height of the row, and the result is lots of vertical white space between items.

The standard solution for this layout is jQuery Masonry which, as they write on their website, works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. That's one option.

Keeping to CSS, however, another flexbox solution is changing the flex-direction from row to column. With this set-up, equal height rows don't apply, vertical whitespace isn't an issue, and each flex item can be its own height.

Here's a demo: http://jsfiddle.net/8rq0maL4/1/