simple-grid.scss

$page-width: 750px, 970px, 1170px;
$breakpoint: 768px, 992px, 1200px;
$gutter: 30px;
$column: 12;

// Phones (<768px)
// Small devices Tablets (≥768px)
// Medium devices Desktops (≥992px)
// Large devices Desktops (≥1200px)

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

.container {
  position: relative;
  margin: 0 auto;
  padding: 0 ($gutter / 2);
  @include clearfix;
}

.row {
  margin: 0 (-$gutter / 2);
  @include clearfix;
}

[class*="col-"] {
  float: left;
  padding: 0 $gutter / 2;
}

@for $i from 1 through $column {
  .col-#{$i} {
    width: percentage($i / $column);
  }
}

@each $width in $page-width {

  $index: index($page-width, $width);
  $brpoint: nth($breakpoint, $index);

  @if ($index == 1) {
    @media (max-width: $brpoint) {
      .container { width: auto; }
      [class*="col-"] {
        float: none;
        width: 100%;
      }
    }
  }
  @else {
    @media (min-width: $brpoint) {
      .container { width: $width; }
    }
  }

}