How to make a multiple lines row in Bourbon Neat?

Question

How to make a multiple lines row in Bourbon Neat?

135 views Asked by arthur.sw At 05 December 2024 at 21:12

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?

Original Q&A

There are 1 answers

**sol** · Accepted Answer · 2016-12-26 11:43:00

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>

TechQA.

How to make a multiple lines row in Bourbon Neat?

There are 1 answers

Short answer

Long answer

Related Questions in HTML

Related Questions in CSS

Related Questions in NEAT

Popular Questions

Popular Tags

Trending Questions