A simple and flexible Sass grid.

_grid.scss

$create-grid: true;

// Breakpoints

$break-mobile: 320px;
$break-mobile-max: 460px;
$break-tablet: 760px;
$break-tablet-max: 900px;
$break-desktop: 1104px;
$break-desktop-max: 1320px;

// Set Paddings

$container-padding-v-mobile: 0;
$container-padding-v-tablet: 0;
$container-padding-v-desktop: 0;

$container-padding-h-mobile: 30px;
$container-padding-h-tablet: 30px;
$container-padding-h-desktop: 40px;

$container-padding-mobile:  $container-padding-v-mobile $container-padding-h-mobile;
$container-padding-tablet:  $container-padding-v-tablet $container-padding-h-tablet;
$container-padding-desktop: $container-padding-v-desktop $container-padding-h-desktop;

// Customize the grid structure

$grid-cols: 9;
$grid-cols-mobile: 2;
$grid-cols-tablet: 6;
$grid-cols-desktop: 9;

// Customize grid padding

$grid-gutters: 2%;
$grid-gutters-mobile: $container-padding-h-mobile;
$grid-gutters-tablet: $container-padding-h-tablet;
$grid-gutters-desktop: $container-padding-h-desktop;

// Mixins Used

// ==========================================================================
// Media Query (Max-Width)
// Example: @include break-max(700px){ Custom CSS Styles }
// ==========================================================================

@mixin break-max($size) {
    @media (max-width: $size) { @content; }
}

// ==========================================================================
// Media Query (Min-Width)
// Example: @include break-min(700px){ Custom CSS Styles }
// ==========================================================================

@mixin break-min($size) {
    @media (min-width: $size) { @content; }
}

// ==========================================================================
// Clear Floats
// Example: @include clearfix()
// http://bit.ly/evOPw5
// ==========================================================================

@mixin clearfix {
  *zoom: 1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// Make

@if $create-grid{


    .grid-container{
        @include clearfix();
        
        position:relative;
        min-width: $break-mobile;
        max-width: $break-mobile-max;
        padding: 0 ($grid-gutters-mobile/2);
        margin:0 auto;
        
        @include break-min($break-tablet){
            max-width: $break-tablet-max;
            padding: 0 ($grid-gutters-tablet/2);
        }
        @include break-min($break-desktop){
            max-width: $break-desktop-max;
            padding: 0 ($grid-gutters-desktop/2);
        }
    }

    @for $i from 1 to ($grid-cols-desktop + 1){
        .col--#{$i}{
            float:left;
            width: ( 100% / $grid-cols-desktop ) * $i;
            padding: 0 $grid-gutters;
        }
        .offset--#{$i}{
            margin-left: ( 100% / $grid-cols-desktop ) * $i;
        }
    }
    @include break-max($break-tablet - 1){
        @for $i from 1 to ($grid-cols-mobile + 1){
            .col-sm--#{$i}{
                float:left;
                width: ( 100% / $grid-cols-mobile ) * $i;
                padding-left: ($grid-gutters-mobile / 2);
                padding-right: ($grid-gutters-mobile / 2);
            }
            .offset-sm--#{$i}{
                margin-left: ( 100% / $grid-cols-mobile ) * $i;
            }
        }    
    }
    @media (min-width: $break-tablet) and (max-width: $break-desktop - 1) {
        @for $i from 1 to ($grid-cols-tablet + 1){
            .col-md--#{$i}{
                float:left;
                width: ( 100% / $grid-cols-tablet ) * $i;
                padding-left: ($grid-gutters-tablet / 2);
                padding-right: ($grid-gutters-tablet / 2);
            }
            .offset-md--#{$i}{
                margin-left: ( 100% / $grid-cols-tablet ) * $i;
            }
        }
    }
    @include break-min($break-desktop){
        @for $i from 1 to ($grid-cols-desktop + 1){
            .col-lg--#{$i}{
                float:left;
                width: ( 100% / $grid-cols-desktop ) * $i;
                // padding: 0 $grid-gutters-desktop;
                padding-left: ($grid-gutters-desktop/2);
                padding-right: ($grid-gutters-desktop/2);
            }
            .offset-lg--#{$i}{
                margin-left: ( 100% / $grid-cols-desktop ) * $i;
            }
        }    
    }
}

/*
  
  Usage (sans-breakpoints)
  ============================================
  
  <div class="grid-container">
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
    <div class="col--1"> 1x </div>
  </div>

  <div class="grid-container">
    <div class="col--3"> 3x </div>
    <div class="col--3"> 3x </div>
    <div class="col--3"> 3x </div>
  </div>

  <div class="grid-container">
    <div class="col--1"> 1x </div>
    <div class="col--3"> 3x </div>
    <div class="col--5"> 5x </div>
  </div>

  <div class="grid-container">
    <div class="col--6">
        <div class="col--3">3x</div>
        <div class="col--3">3x</div>
        <div class="col--3">3x</div>
    </div>
    <div class="col--3">
        <div class="col--5">5x</div>
        <div class="col--4">4x</div>
    </div>
  </div>
  
  Usage (with breakpoints)
  ============================================
  
  <div class="grid-container">
      <div class="col-sm--1 col-md--1 col-lg--3">Changes</div>
      <div class="col-sm--1 col-md--4 col-lg--1">Changes</div>
      <div class="col-sm--2 col-md--1 col-lg--5">Changes</div>
  </div>

  <div class="grid-container">
      <div class="col-sm--1">Small (50%)</div>
      <div class="col-sm--1">Small (50%)</div>
  </div>

  <div class="grid-container">
      <div class="col-md--2">Medium (25%)</div>
      <div class="col-md--4">Medium (75%)</div>
  </div>

  <div class="grid-container">
      <div class="col-lg--2">Large (22.22%)</div>
      <div class="col-lg--5">Large (55.55%)</div>
      <div class="col-lg--2">Large (22.22%)</div>
  </div>

  <div class="grid-container">
      <div class="col-md--4 offset-md--1 col-lg--3 offset-lg--3">Changes + Offset</div>
  </div>
  
*/