第二排 Neat 网格无法正常工作

Question

我正在尝试使用 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

如您所见，由于第一行中第一个 post 的文本比第一行中其他两个 post 的文本长，因此导致第二行出现问题。我可以通过在 post 元素上放置一个最小高度来解决这个问题，但必须有更好的方法。我是否正确使用了 Neat 的网格？感谢您的帮助！

Answer 1

你有几个选择。最好的办法是结合使用 nth-child 选择器和 clear: left;。

在您的示例中，这将如下所示。

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

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

这将导致每四个 post 清除左侧的 space，确保其左侧没有任何内容，在本例中为超长 post标题。

Answer 2

您可以将每个 "row" 包装在其自己的 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> 行时。

第二排 Neat 网格无法正常工作

Second row of Neat grid not working properly

bourbon

neat