Is it possible to pack elements close together to optimize space usage?

Question

Is it possible to get the elements in the picture below to pack closer together somehow? Preferably using css, but javascript solutions are also welcome if that's not possible.

I'd like all the elements to be packed as closely together as possible to minimize the space they take up. The elements are currently spans with display:inline-block. I have tried to change to block with float:left, etc, but I always end up with inefficient rows of elements. That is the expected way, I'm just saying I'd like it to not be like that in this case :P

Any brilliant minds able to help me out here?

Answer 1

If you're searching for a more sophisticated solution then look into jQuery masonry plugin. Link here: jQuery masonry plugin

Answer 2

Freetile is perfect and simple :) https://github.com/yconst/Freetile