第二行整潔的網格不能正常工作

Question

我想使用整潔的網格容器來創建兩個三行，但第二行沒有按預期啓動，因爲第一行不同的文本長度。

的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

正如你所看到的，因爲文字第一排的第一篇文章比第二排的第二篇文章長，在第二排造成問題。我可以通過在帖子元素上設置最小高度來解決此問題，但必須有更好的方法。我是否正確使用了Neat的網格？任何幫助表示讚賞！

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是這樣的：

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

先前建議的

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

方法做產量DRYer代碼，但是，特別是如果你有很多<article> s /行。