How to lay out block elements with height alignment in rows with a variable number of columns?

Question

css

Greetings!
In general, it is necessary to lay out something like a catalog, but:
Blocks in columns of different heights and cannot be cropped. It is required that they have the same height equal to the height of the largest block in the line , while the number of columns is also adaptive =)
Using JS is too simple and it's "ugly".
Browser support is not important yet, so css3.
Tried using inline-block, of course the problem with the height remains...
Sketch for experiments: jsfiddle.net/bzc2r2dw/4
Tell me , please, at least what to look at?

Answer 1

well, I think here flex-box to help
checked only in firefox jsfiddle.net/bzc2r2dw/6