SCSS Grid

README.md

How to use

1/3, 2/3 columns

<div class="row">
  <div class="column width-2"></div>
  <div class="column width-4"></div>
</div>

column positioned on the right half

<div class="row">
  <div class="column width-3 over-3"></div>
</div>

row with content that overflows

<div class="row overflow">
  <div class="column width-6"></div>
  <div class="row-clear"></div>
</div>

row with an absolutely positioned column

<div class="row">
  <div class="column width-6"></div>
  <div class="column absolute width-2 over-1"></div>
</div>

grid.css.scss

$column-count: 6;
$column-width: 120px;
$gutter-width: 40px;

.row {
  margin: 0 auto;
  width: ($column-width * $column-count) + ($gutter-width * ($column-count - 1));
  position: relative;
  overflow: hidden;

  &.overflow { overflow: visible; }

  .row-clear {
    clear: both;
  }
}

.column {
  float: left;
  height: 100%;
  position: relative;

  @for $i from 1 through $column-count {
    &.width-#{$i} {
      width: ($column-width * $i) + ($gutter-width * ($i - 1));
      margin-left: $gutter-width;
    }
  }

  &:first-child {
    margin-left: 0;
  }

  @for $i from 0 through $column-count - 1 {
    &.over-#{$i} {
      margin-left: ($column-width + $gutter-width) * $i;

      &.absolute {
        margin-left: 0;
        left: ($column-width + $gutter-width) * $i;
        position: absolute;
      }
    }
  }  
}