A basic CSS Grid layout with a few lines of SASS.

I’ve found rolling my own ‘Grids’ layout a much better option than using a framework. I’ve refined it down to this small bit of SCSS.


.row{
  @for $i from 1 through 12 {
    .grid-#{$i} {
      width: 100% / 12 * $i;
      float: left;
    }
  }
  clear: both
}

Then in your markup just define how many of the 12 grids you want the column to take up.

<div class="row">
    <div class="grid-6">Column A</div>
    <div class="grid-6">Column B</div>
</div>
<div class="row">
    <div class="grid-4">Column A</div>
    <div class="grid-4">Column B</div>
    <div class="grid-4">Column C</div>
</div>
<div class="row">
    <div class="grid-8">Column B</div>
    <div class="grid-4">Column C</div>
</div>

An example can be found here: http://jsfiddle.net/awKQ7/