Columns don't align properly when more than 2 in a row

Question

I have this css:

div.row {
  @include outer-container; 
  div.col-5 { @include span-columns(5); }
  div.col-6 { @include span-columns(6); }
}

And this html:

<div class="jobs row">
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
</div>

I want maximum of 2 divs per line.

However, instead of displaying the first 2 col divs side by side, and then the third one on the second line to the left, the first div remains on the first line alone, and the other 2 fall below side by side.

And if I change the class of the second div to col-5 for example, then they line up correctly.

Why aren't they just falling normally, as when using bootstrap cols inside a row for example?

Answer 1

You need to use the omega mixin. Try this:

HTML

<div class="jobs row">
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
</div>

SCSS

div.row {
  @include outer-container; 
  div.col-6 { 
    @include span-columns(6); 
    @include omega(2n);
  }
}