Second row of Neat grid not working properly

Question

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!

score 0 · Accepted Answer · answered May 15 '17 at 14:15

0

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.

answered May 15 '17 at 14:15

whmii

430
2
10

Perfect. Don't know why I didn't think of this solution. Thanks! – lovestacos May 15 '17 at 18:43

score 0 · Answer 2 · answered Jun 18 '17 at 04:32

You could wrap each "row" in its own div and make them all separate grid-containers. They then have a built-in clearfix.

A simplified version of the html would look like this:

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

And the SCSS would look like this:

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

The previously suggested method of

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

does yield DRYer code, though, especially if you have a lot of <article>s / rows.

Second row of Neat grid not working properly

2 Answers2