title: jQuery grid layout with resizable panels
body: <p>I need to do a simple layout for my html page, and I need some kind of grid layout.</p>
  
  <p>The layout should be like the one in the image:</p>
  
  <p><img src="https://i.stack.imgur.com/Cs27x.png" alt="enter image description here"></p>
  
  <p>with the ability to make one of the widget full screen, so that it takes the whole widgets' area as you can see in the following image:</p>
  
  <p><img src="https://i.stack.imgur.com/E6E3w.png" alt="enter image description here"></p>
  
  <p>Finally, the content of each widget should be resized dinamically to fit the widget itself (I'm using full svg contents, so it should be enough to use <code>transform=scale(w,h)</code>)</p>
  
  <p>Another needed feature is the animation of the resizing.</p>
  
  <p>Now, since I'm quite new to html+javascript world, I've spent the whole day looking for some cool <em>jQuery</em> plugin to help me in this task and I've ended up with two useful plugins:</p>
  
  <ul>
  <li><a href="http://vnjs.net/www/project/freewall/" rel="nofollow noreferrer">Freewall</a></li>
  <li><a href="http://gridster.net" rel="nofollow noreferrer">Gridster</a> (which I used to make the sample images)</li>
  </ul>
  
  <p>The problem is that both of them are missing something that I need: they don't allow me to move the blocks within code but they only work with mouse interactions.</p>
  
  <p>This means that I can't expand <code>widget2</code> to take the full area because it will expand starting from the current position and I can't move it.</p>
  
  <p>Another problem is that I can't remove the widgets that I don't need to show.</p>
  
  <p>With <em>Freewall</em> I can use filtering but, for example, filtering on <em>widget 1</em> makes the <em>widgets 2</em>'s row disappear and the <em>footer</em> is moved up.</p>
  
  <p>With <em>Gridster</em> there's a <code>remove_widget</code> method and it works, but I'll need its html to add it back again.</p>
  
  <p>So I built a custom solution based on <em>jQuery</em> and some kind of hand-written calculations to deal with <code>div</code>'s size and stuff like that, and it works fine but it's really a pain to use it because everytime I change something I'm forced to use <code>Firebug</code> to see which are the dimensions that I need, like a trial and error method.</p>
  
  <p>It often happens that two divs of the same size require different <code>transform</code> options and it's really hard to work with that solution.</p>
  
  <p>So the question is: <strong>is there any plugin/framework that allows me to build a layout like the one in the images and with the features that I wrote?</strong></p>
  
  <p>This could be summarized like a mosaic view, with one of the boxes wider than the others and the ability to make a box into full screen.</p>