How to do a three column grid with bourbon neat?

Question

I'm trying to create a three column grid, and have the columns evenly distributed across the row.

My markup is simple:

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div> 

My scss is also pretty straight-forward.

 .row {
    @include outer-container ;
  }
 .service {   
    @include span-columns(4) ;
}

However the result is a mess:

That's close to what I want. But the blocks are all over the place. They aren't evenly distributed either horizontally or vertically.

What could be going on here? How can I get a simple three-column grid with even distribution of blocks?

Answer 1

You would need to use the omega mixin here. Try this:

.row {
    @include outer-container ;
  }
 .service {   
    @include span-columns(4);
    @include omega(3n);
}

Some more information here:

http://thoughtbot.github.io/neat-docs/latest/#omega