Comment créer une grille à trois colonnes avec soignée?

Question

J'ai déjà eu cette question réponse ici: How to do a three column grid with bourbon neat? Cependant, depuis que j'ai mis à jour Bourbon et soigné sur mon système, cette méthode ne fonctionne plus.

Encore une fois, mon code ressemble à ceci:

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

Et mon SCSS ressemble à ceci:

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

Et le résultat ressemble à ceci:

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

En versions précédentes ce problème d'escalier pourrait être corrigé en utilisant l'oméga mixi n.

Cependant, avec la version actuelle, si j'inclue 'omega (3n)' sass renvoie "no mixin named omega".

Si je vais dans les docs pour la version actuelle, je peux voir qu'il n'y a plus d'information sur 'omega'. Le changelog pour 2.0 indique que omega a été enlevé. Donc, avec la version actuelle de neat: comment créer une grille à trois colonnes?

Answer 1

La solution la plus simple que je connaisse est de mettre les trois premières colonnes dans un div. .row et les trois dernières colonnes dans leur propre div. De cette façon, vous avez deux conteneurs de grille, ce qui crée une solution claire.

Markup:

<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 (inchangé):

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

Ou, vous pouvez mettre une gauche clairement tous les 4 .col div.

Markup (une seule "ligne"):

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