title: How to Position Divs into a Grid according to a JSON Array of Objects with Height, Width, Rows & Columns Properties
body: <p>I am creating a grid and I need to append items into it from an array of Javascript objects.  </p>
  
  <p><strong>The grid</strong> <code>&lt;div id="grid"&gt;</code> simply a <code>div</code> container which needs to have 4 columns and infinite rows (to accommodate a varying quantity of objects that may be inserted into the grid).</p>
  
  <p><strong>The grid items</strong>, which will also be <code>divs</code>, are based on objects that have attributes specifying their columns, row, width &amp; height within the grid.  They look like this:</p>
  
  <pre><code>c: 1
  r: 3
  x: 1
  y: 1
  </code></pre>
  
  <p><strong>columns:</strong> Just like a <code>table</code> this defines which column the item starts at, and expands to the right according to the item's <code>x</code> value.</p>
  
  <p><strong>row:</strong>  The row the item is on.</p>
  
  <p><strong>x:</strong>  The width of item in columns.  The item width is always less than or equal to 4.</p>
  
  <p><strong>y:</strong>  The height of the item in rows.  The item height is always less than or equal to 2.</p>
  
  <p>I need to write some javascript that will order, position and append these items within the grid based on these attributes.  If it helps, the json data is coming from a similar grid created with the gridster.js library.</p>
  
  <p>jQuery can be used.</p>