0

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:

enter image description here

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?

bob
  • 753
  • 4
  • 15
  • 27
  • 1
    Can you add which version of neat you are using? You likely need to clear the 3rd grid object. try http://thoughtbot.github.io/neat-docs/latest/#omega – whmii Feb 14 '17 at 15:59

1 Answers1

2

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

Mike Harrison
  • 1,020
  • 2
  • 15
  • 42