第二行整洁的网格不能正常工作

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 /行。