White Space with Isotope plugin when expanding boxes, what to do?

Question

I have this content area, build with the isotope plugin: http://jsfiddle.net/B2Erk/

The content consists of 10 boxes equally sized.

When the boxes with "Number 3, Number 4, Number 7 and Number 8" is pressed they expands to the right. This results in the box that has been clicked, moves to the row below and leaves whitespace to the row above (see fiddle).

Is it possible making the boxes (Number 3, Number 4, Number 7 and Number 8) to open to the left and make it so there is no white space?

This also needs to work when scaling down.

The code used to expand the boxes:

// change size of clicked element
  $container.delegate( '.item', 'click', function(){
    $(this).toggleClass('large');
    $container.isotope('reLayout');
  });

Answer 1

Yeap, this is very much possible with a custom layout .

You can see an example of this running at this test site where all the items are flush along the right hand edge - the (unminified) js code for that layout is here .