使基礎列跨越列的多個「行」

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 DIV絕對。

此外，爲什麼不這樣工作就像我認爲會呢？這種情況不是一個網格系統的全部點嗎？

謝謝！

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>