Wrap tightly around blocks

I wanted to create a grid where the blocks automatically move to the next row when the grid gets too small. It works like this: http://jsfiddle.net/nbmt54nn/5/ (try resizing the window so the blocks move to the next line).

The problem is that the mesh should wrap tightly around the blocks without leaving any extra space on the right side, or at least center an imaginary square around the blocks while keeping the left alignment for individual blocks.

Is it possible? And if so, please elaborate on how to do it. If this is not possible, I would like some advice on how best to do this. Your help is appreciated.

The workaround I'm using right now is to calculate the grid width and use media queries to set the grid width to the same width as the boxes n

where it n * (block-width + 2 * block-margin) + other-elements

should be less than the page width.