Second row of Neat grid not working properly

I'm trying to use Neat's grid-container to create two rows of three, but the second row isn't starting as expected, because of different text lengths in the first row.

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

The SCSS:

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

And here's a screenshot of how it appears:

Example of problem with second row

As you can see, because the text of the first post in row one is longer than the other two post's text in row one, it's causing an issue in row two. I could fix this by putting a min-height on post elements, but there has to be a better way. Am I using Neat's grid correctly? Any help is appreciated!

You have a few options. Your best bet would be to use a combination of nth-child selector and a clear: left;.

In your example, this would appear as the following.

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

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

This will cause every fourth post to clear the space to the left, making sure that there is nothing to the left of it, in this case the extra long post title.