title: Make Foundation columns span multiple "rows" of columns
body: <p>This could be an incredibly dumb question, but I'm at a loss on how to make 3 sets of columns line up with foundation's grid.</p>
  
  <p>Here's the <a href="http://jsfiddle.net/dainovu3/qgc08k46/2/" rel="nofollow">js fiddle</a></p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="medium-9 columns"&gt;
      &lt;div class="medium-4 columns" style="height: 250px; background: green;"&gt;&lt;/div&gt;
      &lt;div class="medium-4 columns" style="height: 250px; background: blue;"&gt;&lt;/div&gt;
      &lt;div class="medium-4 columns" style="height: 250px; background: red;"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="medium-9 columns"&gt;
      &lt;div class="medium-4 columns" style="height: 250px; background: yellow;"&gt;&lt;/div&gt;
      &lt;div class="medium-4 columns" style="height: 250px; background: orange;"&gt;&lt;/div&gt;
      &lt;div class="medium-4 columns" style="height: 250px; background: purple;"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="medium-3 columns" style="height: 500px; background: black;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the black column to line up with the first "row" of columns <strong>without</strong> making the position of <code>.row</code> container relative and the <code>medium-3 columns</code> div absolute. </p>
  
  <p>Furthermore, why doesn't this work like I assumed it would? Isn't a situation like this the whole point of a grid system?</p>
  
  <p>Thanks!</p>