Very simple & effective grid system

grid.scss

// -------------------------------------------
//   Simple grid system
// -------------------------------------------

/* Container for a group of columns */
.grid {
  width: 100%;
  height: 100%;

  @include clearfix();
}

/* Target all the columns, and apply sensible defaults */
.column, .columns {
  float: left;

  .grid &:last-of-type {
    padding-right: 0;
  }
}

.row {
  clear: both;
}

/*
 * Very simple column layout, every group of columns must be wrapped inside
 * a container with the `.grid` class.
 *
 * The names of the columns try to be semantic as possible, so for example
 * a column filling half of the screen could be done like this:
 *
 * <div class="grid">
 *  <div class="five columns width"></div>
 * </div>
 */

$columns: one, two, three, four, five, six, seven, eight, nine, ten;

@for $i from 1 through length($columns) {
  .#{nth($columns, $i)} {
    width: #{$i * 10%};
    height: 50px;
  }
}