Столбцы Make Foundation охватывают несколько «рядов» столбцов

Question

Это может быть невероятно глупый вопрос, но я не понимаю, как сделать 3 набора столбцов в соответствии с сеткой фундамента.

Вот 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> 

Я хочу черный столб выстраиваться с первой «строкой» столбцов без делает положение .row контейнера относительными и medium-3 columns ДИВА абсолюта ,

Кроме того, почему это не работает, как я предполагал, что это будет? Не такая ли ситуация в сетке?

Спасибо!

Answer 1

Вы близко. Правильное решение должно быть таким (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>