Test responsive 3 column grid using SASS, compass, breakpoint, susy http://sassmeister.com/gist/7272235

SassMeister-input-HTML.html

<h1>
    Responsive 3 column grid using SASS, compass, breakpoint, susy
</h1>
<ul class="grid3">
    <li>
        <div class="grid-content">
            Column 1
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 2
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 3
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 4
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 5
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 6
        </div>
    </li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";
@import "breakpoint";
@import "susy";

// Breakpoint Gem overrides
$breakpoint-default-media: only screen;
$breakpoint-to-ems: true;

$total-columns  : 24;             // a 12-column grid
$column-width   : 2em;            // each column is 4em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters

$bp-widest: 1000px;
$bp-pair-medium-wide: 500px 1000px;

.grid3 {
    background-color: rgba(0,0,0,0.1);
    @include border-box-sizing;
    @include container;
}
.grid3 ul,
.grid3 ol {
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.grid3 ul,
.grid3 ol,
.grid3 li {
    list-style: none;
}
.grid-content {
    background-color: rgba(0,0,0,0.1);
    margin: 1em;
    padding: 1em;
}
.grid3 li {
    background-color: rgba(0,0,0,0.1);
    @include breakpoint($bp-pair-medium-wide) {
        @include span-columns(12,24);
    }
    @include breakpoint($bp-widest) {
        @include span-columns(8,24);
    }
}
// Last of 2
.grid3 li:nth-child(2n) {
    @include breakpoint($bp-pair-medium-wide) {
        @include span-columns(12 omega,24);
    }   
}
// First of 2
.grid3 li:nth-child(2n+1) {
    @include breakpoint($bp-pair-medium-wide) {
        clear: left;
    }
}
// Last of 3
.grid3 li:nth-child(3n) {
    @include breakpoint($bp-widest) {
        @include span-columns(8 omega,24);
    }
}
// First of 3
.grid3 li:nth-child(3n+1) {
    @include breakpoint($bp-widest) {
        clear: left;
    }
}

//http://css-tricks.com/examples/nth-child-tester/

SassMeister-output.css

.grid3 {
  background-color: rgba(0, 0, 0, 0.1);
  *zoom: 1;
  max-width: 73em;
  _width: 73em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
}
.grid3 * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.grid3:after {
  content: "";
  display: table;
  clear: both;
}

.grid3 ul,
.grid3 ol {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.grid3 ul,
.grid3 ol,
.grid3 li {
  list-style: none;
}

.grid-content {
  background-color: rgba(0, 0, 0, 0.1);
  margin: 1em;
  padding: 1em;
}

.grid3 li {
  background-color: rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 31.25em) and (max-width: 62.5em) {
  .grid3 li {
    width: 49.29577%;
    float: left;
    margin-right: 1.40845%;
    display: inline;
  }
}
@media only screen and (min-width: 62.5em) {
  .grid3 li {
    width: 32.39437%;
    float: left;
    margin-right: 1.40845%;
    display: inline;
  }
}

@media only screen and (min-width: 31.25em) and (max-width: 62.5em) {
  .grid3 li:nth-child(2n) {
    width: 49.29577%;
    float: right;
    margin-right: 0;
    *margin-left: -1em;
    display: inline;
  }
}

@media only screen and (min-width: 31.25em) and (max-width: 62.5em) {
  .grid3 li:nth-child(2n+1) {
    clear: left;
  }
}

@media only screen and (min-width: 62.5em) {
  .grid3 li:nth-child(3n) {
    width: 32.39437%;
    float: right;
    margin-right: 0;
    *margin-left: -1em;
    display: inline;
  }
}

@media only screen and (min-width: 62.5em) {
  .grid3 li:nth-child(3n+1) {
    clear: left;
  }
}

SassMeister-rendered.html

<h1>
    Responsive 3 column grid using SASS, compass, breakpoint, susy
</h1>
<ul class="grid3">
    <li>
        <div class="grid-content">
            Column 1
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 2
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 3
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 4
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 5
        </div>
    </li>
    <li>
        <div class="grid-content">
            Column 6
        </div>
    </li>
</ul>