如何創建一個整齊的三列網格？

Question

我有這個問題的回答以前在這裏： How to do a three column grid with bourbon neat? 然而，因爲我更新波旁利落我的系統上，這種方法不再起作用。

同樣，我的標記看起來是這樣的：

<div class="row"> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
</div> 

而且我SCSS是這樣的：

.row { 
    @include grid-container; 
     .col { 
      @include grid-column(4) ; 
     } 
    } 

而結果是這樣的：

https://i.stack.imgur.com/9lZHx.png

在以前的版本可以通過使用Omega mixi修復這個樓梯問題ñ。

然而，與當前的版本，如果我有「歐米茄（3N）」青菜返回「沒有混入名爲歐米茄」。

如果我轉到當前版本的文檔，我可以看到沒有關於'歐米茄'的信息了。 2.0版本的更新日誌表明歐米茄已被刪除。

因此，與當前版本的整潔：我如何創建一個三列網格？

Answer 1

我所知道的最簡單的解決方法是將前三列放在.row div中，最後三列放在它們自己的.row div中。這樣，你有兩個網格容器，這創造了一個明確的解決方案。

標記：

<div class="row"> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
</div> 
<div class="row"> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
</div> 

SCSS（不變）：

.row { 
    @include grid-container; 
     .col { 
      @include grid-column(4) ; 
     } 
    } 

或者，你可以把一個明確的左側上每4個.COL格。

標記（只有一個 「行」）：

<div class="row"> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
</div> 

SCSS：

.row { 
    @include grid-container; 
     .col { 
      @include grid-column(4); 
       &:nth-of-type(3n+1) { 
        clear: left; 
      } 
     } 
    }