Generate your own grid with Bourbon and Neat in under 10 lines of CSS. http://sassmeister.com/gist/e3c96e2a676ae090ae40

SassMeister-input-HTML.html

12 column grid generated by Bourbon and Neat.

<!-- First row -->
<section class="row">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="row">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="row">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// *********************
// Visit these docs to customize further
// http://bourbon.io/
// http://neat.bourbon.io/
// *********************

@import "bourbon/bourbon";
@import 'neat/neat';

// By default the site width
// is 68em or 1088px if your
// base font size is 16px.

// Customize the max width 
// of your site to 1000px
// by uncommenting below:
// $max-width: 62.5em;

.row {
  @include outer-container;
}

// generate grid columns
@for $i from 1 through 12 {
  .grid-#{$i} {
    @media(min-width: 700px) {
      @include span-columns($i);
    }
  }
}


// *********************
// For styling purposes
// *********************
.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}
.bg-accent {
  background: purple;
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

.row {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}

.row::after {
  clear: both;
  content: "";
  display: table;
}

@media (min-width: 700px) {
  .grid-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .grid-1:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .grid-2:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .grid-3:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .grid-4:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .grid-5:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .grid-6:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .grid-7:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .grid-8:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .grid-9:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .grid-10:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .grid-11:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .grid-12:last-child {
    margin-right: 0;
  }
}

.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}

.bg-accent {
  background: purple;
}

SassMeister-rendered.html

12 column grid generated by Bourbon and Neat.

<!-- First row -->
<section class="row">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="row">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="row">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>