Simplified grid structure. Originally from ZURB Foundation.

_grid.scss

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

$row-width: 1140px;
$column-gutter: 10px;
$total-columns: 12;

//
// Grid Function
//

@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

//
// Grid Mixins
//

// For creating container, nested, and collapsed rows.
@mixin row {

  // use @include row; to use a container row
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: $row-width;
  
  // Clearfix for all rows
  @include clearfix;

}


// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin col($amount) {

  position: relative;
  float: left;
  width: gridCalc($amount, $total-columns);
  padding-left: $column-gutter / 2;
  padding-right: $column-gutter / 2;

}