title: How to do a three column grid with bourbon neat?
body: <p>I'm trying to create a three column grid, and have the columns evenly distributed across the row.</p>
  
  <p>My markup is simple:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>My scss is also pretty straight-forward.</p>
  
  <pre><code> .row {
      @include outer-container ;
    }
   .service {   
      @include span-columns(4) ;
  }
  </code></pre>
  
  <p>However the result is a mess:</p>
  
  <p><a href="https://i.stack.imgur.com/9lZHx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9lZHx.png" alt="enter image description here"></a></p>
  
  <p>That's close to what I want. But the blocks are all over the place.
  They aren't evenly distributed either horizontally or vertically.</p>
  
  <p>What could be going on here?
  How can I get a simple three-column grid with even distribution of blocks?</p>