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?

Umamaheswaran · Answer 1 · 2016-02-24T10:09:17.933

0

I'm not an expert on bourbon neat. but based on first look each row has 12 columns so if you want 3 divs to align in same row you may have to do 12/3=4. So your html should be like

CSS

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

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>

edited Feb 24 '16 at 10:09

answered Feb 24 '16 at 10:07

Umamaheswaran

3,690
3
29
56

I don't and that wasn't my q. I want 2 divs on each line. – dzimi Feb 24 '16 at 10:08
I did but it's the same as my css, just without the extra classes. Same thing happens, first div takes up the wholle line. – dzimi Feb 24 '16 at 10:14
Can you create a jsfiddle for this and share the link? – Umamaheswaran Feb 24 '16 at 10:15
Don't know how to create a fiddle with this bourbon neat sass crap, but the whole code is in the question anyway, nothing more to it. – dzimi Feb 24 '16 at 10:21

score 0 · Accepted Answer · answered Mar 02 '16 at 14:37

0

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);
  }
}

answered Mar 02 '16 at 14:37

Mike Harrison

1,020
2
15
42

thanks, can you have a look here as well? http://stackoverflow.com/questions/35660418/burbon-neat-shift-have-the-right-element-on-top-instead-of-the-left-one – dzimi Mar 12 '16 at 23:20

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

2 Answers2