JUST CSS. NO JAVASCRIPT, JQUERY etc.

Similar to the previous demonstration.

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.

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.

Firefox does have its own method of producing a masonry layout but this is not yet available for general use.