JUST CSS. NO JAVASCRIPT, JQUERY etc.

This demonstration uses a method of getting the height of an element with just CSS.

I did not think this was possible but chanced upon a method demonstrated by Frontend Masters.

Using this method it is possible to apply it to a grid layout, getting the height of each element and arrange into a responsive masonry pattern.

It does not get it 100% right, but is near enough so that you cannot see any imperfections.

So the stylesheet is very small considering tha amount of calculations required.

It is a pity that Firefox and Safari are unable to render this correctly, but they do still show this as a standard multi column grid.