My sassy CSS grid template. This is usually where I start from.

grid.scss

$column_width: 60px;
$gutter_width: 20px;
$columns: 12;

.container { 
  margin-bottom: 2em; 
  width: ($column_width * $columns) + ($columns - 1  * $gutter_width); 
}
.clearfix, .container { display: block; }
.clearfix:after,
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden; 
}

.column { float: left; margin-right: $gutter_width; }
.first { clear: left; }
.last { margin-right: 0; }

@for $i from 1 through $columns {
  .span-#{$i} { 
    width: $column_width * $i  + ($gutter_width * ($i - 1)); 
    position: relative;
  }
}

@for $i from 1 through $columns - 1 {
  .push-#{$i} { 
    margin-right: -$column_width * $i  + ($gutter_width * ($i - 1));
    margin-left: $column_width * $i  + ($gutter_width * ($i - 1));
  }
  .pull-#{$i} { margin-left: -$column_width * $i  + ($gutter_width * ($i - 1)); }
}