3列グリッドをきれいに作成するにはどうすればよいですか？

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

以前のバージョンのこの階段の問題は、オメガmixi n。

しかし、現在のバージョンでは、「omega（3n）」を含めると「sass」は「omegaという名前のmixinはありません」を返します。

私が現在のバージョンのドキュメントに行くと、もう「オメガ」に関する情報がないことがわかります。 2.0の変更ログには、オメガが削除されていると記載されています。

したがって、最新のバージョンでは、3列のグリッドはどのように作成できますか？

Answer 1

私が知っている最も簡単な解決策は、最初の3つの列を.row divに、最後の3つの列を独自の.row divに入れることです。そうすることで、2つのグリッドコンテナが作成され、クリアな修正が作成されます。

マークアップ：

<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) ; 
     } 
    } 

それとも、あなたはすべての第四.COL divの上で明確な左を置くことができます。

マークアップ（唯一の "行"）：

<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; 
      } 
     } 
    }