title: How to fix the position of div's in responsive UI
body: <p>I have to display the content in a grid. All items are div's with random height, and I need to have control over how they are displayed. It is a responsive UI with 4-cols, 3-cols and 1-cols. Assume that X's are available in javascript array and G are the google ad's.</p>
  
  <p>Is there any classes that I can use in foundation to achieve this. Or do I need to dynamically generate the grid based on the resolution. </p>
  
  <p>4*4</p>
  
  <pre><code>X  2  3  X
  5  G  7  X
  9  X  11 12
  </code></pre>
  
  <p>3*3</p>
  
  <pre><code>X 2 X
  4 G X
  7 X 9
  </code></pre>