bourbon neat grid 12 column not working

Question

I am trying to use bourbon neat grid, and trying to get two column side by side with 8:4 ratio But second div goes underneath the first.

<div class="container">
  <section id="content">
    <div id="content-area">
      <div id="block-homepage-homepage-featured-hero" class="block"></div>
      <div id="block-views-tv-guide-block-1" class="block"></div>
    </div>
   </section>
</div>

I have following css from my custom scss

> #content { @include span-columns(12);

#block-homepage-homepage-featured-hero { @include span-columns(8 of 12); }
#block-views-tv-guide-block-1 { @include span-columns(4 of 12); } }

And following from layout.sass

 .container
      @include outer-container
      margin-left: auto
      margin-right: auto
      width: auto

Looking at generated output for both block it appear in firebug as follows: block-homepage-featured-hero

 float: left;
  display: block;
  margin-right: 2.12766%;
  width: 65.95745%;

block-views-tv-guide-block-1

float: left;
  display: block;
  margin-right: 2.12766%;
  width: 31.91489%;

Edit I found the issue. there is an extra div within section content. but is empty. I cant get rid of it. So question now how to define its width to 0 so it wouldnt affect the columns.

<div class="container">
  <section id="content">
    <div id="content-area">
      <div id="block-homepage-homepage-featured-hero" class="block"></div>
      <div id="block-views-tv-guide-block-1" class="block"></div>
      **<div id="extra-empty-dive></div>**
    </div>
   </section>
</div>

score 1 · Accepted Answer · edited Jul 12 '16 at 14:25

I found the solution. If someone wondering and can be a help. It requires to add omega property. So bourbone need omega to define last div in row.

In my case i added omega to second div as shown below:

#block-views-tv-guide-block-1 { 
  @include span-columns(4 of 12); 
  @include omega()
}

you will find another issue with mobile first approach coz omega will get applied to wider screen as well. One solution is to use omega-reset as suggest here. But this is not the elegant solution. Basically you are adding a property and removing again with hack.

A more elegant solution would be use mutually exclusive media queries as suggest here an example for this would be

$breakpoint1: 360px;
$breakpoint2: 700px;
$medium-viewport: new-breakpoint(min-width $first-breakpoint-value max-width $second-breakpoint-value);
$large-viewport: new-breakpoint(min-width $second-breakpoint-value + 1);

#content {
  @include media($medium-viewport) {
    @include span-columns(8);
    @include omega(1n);
  }

  @include media($large-viewport) {
    @include span-columns(8);
    @include omega(2n);
  }
}

This way, I do not use omega-reset.

bourbon neat grid 12 column not working

1 Answers1