Flexbox Masonry (Content-Driven Heights)

Card 1

Short content.

Card 2

Medium content.

Enough to show the height difference.

Card 3

This one is very tall.


Lots of text or images.

With flexbox column wrapping,
tall items push the next items down,
producing a staggered layout.

Card 4

Short again.

Card 5

Medium.

Looks great in columns.