12 Column Super Simple Grid

grid.css

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.container {
  position: relative;
  width: 1100px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }
  @media (max-width: 1100px) {
    .container {
      width: 100%; } }

.row {
  margin-right: -15px;
  margin-left: -15px;
  margin-top: 30px;
  *zoom: 1; }
  .row:first-child {
    margin-top: 0; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }

.col-1 {
  width: 8.33333333%; }

.col-2 {
  width: 16.66666666%; }

.col-3 {
  width: 24.99999999%; }

.col-4 {
  width: 33.33333332%; }

.col-5 {
  width: 41.66666665%; }

.col-6 {
  width: 49.99999998%; }

.col-7 {
  width: 58.33333331%; }

.col-8 {
  width: 66.66666664%; }

.col-9 {
  width: 74.99999997%; }

.col-10 {
  width: 83.3333333%; }

.col-11 {
  width: 91.66666663%; }

.col-12 {
  width: 99.99999996%; }

.col-1-center {
  margin-left: 45.833333335%;
  width: 8.33333333%; }

.col-2-center {
  margin-left: 41.66666667%;
  width: 16.66666666%; }

.col-3-center {
  margin-left: 37.500000005%;
  width: 24.99999999%; }

.col-4-center {
  margin-left: 33.33333334%;
  width: 33.33333332%; }

.col-5-center {
  margin-left: 29.166666675%;
  width: 41.66666665%; }

.col-6-center {
  margin-left: 25.00000001%;
  width: 49.99999998%; }

.col-7-center {
  margin-left: 20.833333345%;
  width: 58.33333331%; }

.col-8-center {
  margin-left: 16.66666668%;
  width: 66.66666664%; }

.col-9-center {
  margin-left: 12.500000015%;
  width: 74.99999997%; }

.col-10-center {
  margin-left: 8.33333335%;
  width: 83.3333333%; }

.col-11-center {
  margin-left: 4.166666685%;
  width: 91.66666663%; }

.col-12-center {
  margin-left: 0.00000002%;
  width: 99.99999996%; }

.push-1 {
  left: 8.33333333%; }

.push-2 {
  left: 16.66666666%; }

.push-3 {
  left: 24.99999999%; }

.push-4 {
  left: 33.33333332%; }

.push-5 {
  left: 41.66666665%; }

.push-6 {
  left: 49.99999998%; }

.push-7 {
  left: 58.33333331%; }

.push-8 {
  left: 66.66666664%; }

.push-9 {
  left: 74.99999997%; }

.push-10 {
  left: 83.3333333%; }

.push-11 {
  left: 91.66666663%; }

.push-12 {
  left: 99.99999996%; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-center, .col-2-center, .col-3-center, .col-4-center, .col-5-center, .col-6-center, .col-7-center, .col-8-center, .col-9-center, .col-10-center, .col-11-center, .col-12-center {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; }
  @media (max-width: 680px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-center, .col-2-center, .col-3-center, .col-4-center, .col-5-center, .col-6-center, .col-7-center, .col-8-center, .col-9-center, .col-10-center, .col-11-center, .col-12-center {
      width: 100%; } }

@media (max-width: 680px) {
  .col-1-center, .col-2-center, .col-3-center, .col-4-center, .col-5-center, .col-6-center, .col-7-center, .col-8-center, .col-9-center, .col-10-center, .col-11-center, .col-12-center {
    margin-left: 0; } }

@media (max-width: 680px) {
  .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {
    left: 0; } }

grid.scss

// Border Box FTW
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

$container-width: 1100px !default; // Main container width
$gutter: 15px !default; // Space between columns
$row-margin: ($gutter * 2) !default; // Space between rows
$bp-desktop: $container-width;
$bp-mobile: 680px;

// @include container;
@mixin container() {
  position: relative;
  width: $container-width;
  padding-right: $gutter;
  padding-left: $gutter;
  margin-right: auto;
  margin-left: auto;
}

// @include row;
@mixin row() {
  margin-right: -$gutter;
  margin-left: -$gutter;
  margin-top: $row-margin;
  &:first-child {
    margin-top: 0;
  }
  @include cf;
}

// @include col(1..12);
@mixin col($cols) {
  width: 8.33333333% * $cols;
  @extend %col;
}

// @include col-center(1..12);
@mixin col-center($cols) {
  $width: 8.33333333% * $cols;
  margin-left: (100 - $width) / 2;
  width: $width;
  @extend %col;
  @extend %col-center;
}

// @include push(1..12);
@mixin push($cols) {
  left: 8.33333333% * $cols;
  @extend %push;
}

// Micro Clearfix
// http://nicolasgallagher.com/micro-clearfix-hack/
// @include cf;
@mixin cf() {
  *zoom: 1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin bp($width) {
    @media (screen and max-width: $width) {
      @content;
    }
}

// .container
.container {
  @include container;
  @include bp($bp-desktop) {
    width: 100%;
  }
}

// .row
.row {
  @include row;
}

// .col-1..12
@for $i from 1 through 12 {
  .col-#{$i} {
    @include col($i);
  }
}

// .col-center-1..12
@for $i from 1 through 12 {
  .col-#{$i}-center {
    @include col-center($i);
  }
}

// .push-1..12
@for $i from 1 through 12 {
  .push-#{$i} {
    @include push($i);
  }
}

// @extend %col;
%col {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: $gutter;
  padding-left: $gutter;
  @include bp($bp-mobile) {
    width: 100%;
  }
}

// @extend %col-center;
%col-center {
  @include bp($bp-mobile) {
    margin-left: 0;
  }
}

// @extend %push;
%push {
  @include bp($bp-mobile) {
    left: 0;
  }
}

A super simple 12 column grid system with sass mixins and css classes.