La deuxième rangée de la grille Neat ne fonctionne pas correctement

Question

J'essaye d'utiliser le grid-container de Neat pour créer deux rangées de trois, mais la deuxième rangée ne démarre pas comme prévu, à cause des différentes longueurs de texte dans la première rangée.

Le code HTML:

<section id="featuredpost"> 
    <div class="widget-wrap"> 
    <h3>Vehicula Justo Elit Mollis</h3> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    </div> 
</section> 

Le SCSS:

.featuredpost { 
    @include grid-container; 
    .post { 
    @include grid-column(4); 
    } 
} 

Et voici une capture d'écran de la façon dont il apparaît:

Example of problem with second row

Comme vous pouvez le voir, parce que le texte du premier poste de la première ligne est plus long que celui des deux autres postes de la première ligne, s provoquant un problème dans la rangée deux. Je pourrais résoudre ce problème en mettant une hauteur minimale sur les éléments post, mais il doit y avoir un meilleur moyen. Est-ce que j'utilise la grille de Neat correctement? Toute aide est appréciée!

Answer 1

Vous avez quelques options. Votre meilleur pari serait d'utiliser une combinaison de sélecteur nth-child et un clear: left;.

Dans votre exemple, ceci devrait apparaître comme suit.

.post { 
    @include grid-column(4); 

    &:nth-child(3n+1) { 
    clear: left; 
    } 
} 

Cela entraînera tous les quatre après pour effacer l'espace à gauche, en vous assurant qu'il n'y a rien à la gauche de celui-ci, dans ce cas, le titre de poste extra long.

Answer 2

Vous pouvez envelopper chaque "rangée" dans son propre div et en faire tous les conteneurs-grilles séparés. Ils ont alors un clearfix intégré.

Une version simplifiée du HTML ressemblerait à ceci:

<div class="grid-row"> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
</div> 
<div class="grid-row"> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
</div> 

Et le SCSS ressemblerait à ceci:

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

La méthode précédemment suggéré de

...  
&:nth-child(3n+1) { 
clear: left; 
} 
... 

-t cédez le code DRYer, surtout si vous avez beaucoup de <article> s/lignes.