SassMeister-input-HTML.html

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
  <div class="column">Column 5</div>
  <div class="column">Column 6</div>
  <div class="column">Column 7</div>
  <div class="column">Column 8</div>
  <div class="column">Column 9</div>
</div>

SassMeister-output.css

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0.85%;
  background-color: #eee;
}
.container:before, .container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
@media (min-width: 728px) {
  .container .column:nth-child(3n + 1) {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
    padding-left: 0.85%;
    padding-right: 0.85%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: left;
  }
}
@media (min-width: 728px) {
  .container .column:nth-child(3n + 2) {
    float: left;
    width: 33.33333%;
    margin-left: 33.33333%;
    margin-right: -66.66667%;
    padding-left: 0.85%;
    padding-right: 0.85%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}
@media (min-width: 728px) {
  .container .column:nth-child(3n) {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
    padding-left: 0.85%;
    padding-right: 0.85%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}

.column {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid white;
  background: hotpink;
  font-family: sans-serif;
  color: white;
}

SassMeister-rendered.html

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
  <div class="column">Column 5</div>
  <div class="column">Column 6</div>
  <div class="column">Column 7</div>
  <div class="column">Column 8</div>
  <div class="column">Column 9</div>
</div>

screen.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Breakpoint (v2.4.2)
// Zen Grids (v1.4)
// ----

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "zen";
@import "breakpoint";

// Zen grids
$zen-column-count: 4;
$zen-gutter-width: 1.7%;

// Breakpoints
$narrow: 420px; // 30em 6
$tablet: 560px; // 40em 8
$computer: 728px; // 52em 12
$wide: 910px; // 65em 12

// Mixin
@mixin at-breakpoint($breakpoint, $columns) {
  @include breakpoint($breakpoint) {
    $zen-column-count: $columns !global;
    @content;
  }
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 ($zen-gutter-width / 2);
  @include zen-grid-container();
  background-color: #eee;

  .column {
    &:nth-child(3n + 1) {
      @include at-breakpoint($computer, 12) {
        @include zen-grid-item(4, 1);
        @include zen-clear(left);
      }
    }
    &:nth-child(3n + 2) {
      @include at-breakpoint($computer, 12) {
        @include zen-grid-item(4, 5);
      }
    }
    &:nth-child(3n) {
      @include at-breakpoint($computer, 12) {
        @include zen-grid-item(4, 9);
      }
    }
  }
}

.column {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid white;
  background: hotpink;
  font-family: sans-serif;
  color: white;
}