Make Foundation columns span multiple "rows" of columns

Question

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.

Here's the js fiddle

HTML

<div class="row">
  <div class="medium-9 columns">
    <div class="medium-4 columns" style="height: 250px; background: green;"></div>
    <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
    <div class="medium-4 columns" style="height: 250px; background: red;"></div>
  </div>
  <div class="medium-9 columns">
    <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
    <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
    <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

I want the black column to line up with the first "row" of columns without making the position of .row container relative and the medium-3 columns div absolute.

Furthermore, why doesn't this work like I assumed it would? Isn't a situation like this the whole point of a grid system?

Thanks!

Answer 1

You are close. The right solution should be like this (Fiddle):

<div class="row">
  <div class="medium-9 columns">
      <div class="row">
        <div class="medium-4 columns" style="height: 250px; background: green;"></div>
        <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
        <div class="medium-4 columns" style="height: 250px; background: red;"></div>
      </div>
      <div class="row">  
        <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
        <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
        <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
      </div>
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>