How to make a multiple lines row in Bourbon Neat?

Question

I tried to align my articles on a simple grid with Bourbon Neat.

The html:

<body>
  <section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article> <!-- << comment this to solve the problem -->
  </section>
</body>

The scss:

@import "neat";

section {
  @include outer-container;
  article { @include span-columns(3); }
}

The CodePen example.

As you can see, the fourth and fifth articles are sent to the next row.

When the fifth article is commented, the fourth article correctly remains on the first row.

How can I get rows of four articles?

score 2 · Accepted Answer · edited Dec 26 '16 at 11:56

Short answer

You have to remove the right margin of the last item of a row. In Neat, you can use omega() for this purpose:

section {
  @include outer-container;
  article {
    @include span-columns(3);
    @include omega(4n);
  }
}

Working CodePen.

Long answer

The last article in a section has no margin-right.

section article:last-child {
  margin-right: 0;
}

When you have 5 articles in a section the 4th is not the last, so it gets a margin, which forces it on to the next row. When you remove the 5th the 4th becomes the last, its margin is removed, which lets it fit on the row.

You can remove the margin on the 4th article like this:

section article:nth-of-type(4) {
  margin-right: 0;
}

This might be problematic if you want many rows of 4 articles. What might be better is changing your HTML markup...

<section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
</section>
<section>
    <article>5</article>
    <article>6</article>
    <article>7</article>
    <article>8</article>
</section>

How to make a multiple lines row in Bourbon Neat?

1 Answers1

Short answer

Long answer