ニートグリッドの2番目の行が正しく機能しない

Question

2番目の行を作成するのにNeatのグリッドコンテナを使用しようとしていますが、最初の行のテキストの長さが異なるため、

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> 

SCSS：

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

そして、ここではそれがどのように表示されるかのスクリーンショットです：

Example of problem with second row

をあなたが見ることができるように、テキストの理由行1の最初の投稿の長さは、行1の他の2つの投稿のテキストよりも長く、行2に問題を引き起こしています。私はポスト要素に最小の高さを置くことでこれを修正することができますが、より良い方法が必要です。ニートのグリッドを正しく使用していますか？どんな助けもありがとう！

Answer 1

あなたはいくつかの選択肢があります。最適な方法は、nth-childセレクタとclear: left;の組み合わせを使用することです。

この例では、次のようになります。

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

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

これは、この場合には、特別に長い記事のタイトル、それの左側には何もないことを確認して、左にスペースをクリアするためにあらゆる第四ポストの原因となります。

Answer 2

それぞれの「行」を独自のdivにラップし、すべての個別のグリッドコンテナにすることができます。彼らはそれから、組み込みのclearfixを持っています。

HTMLの簡易版は、次のようになります。

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

をそしてSCSSは次のようになります。

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

の

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

以前に提案された方法ではありません特にDRYerコードは、<article> s/rowsが多い場合に発生します。