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

.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)
// ----

// Zen grids breakpoint

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

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

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

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

.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) {
        @include zen-grid-item(4, 1);
        @include zen-clear(left);
      }
    }
    &:nth-child(3n + 2) {
      @include at-breakpoint($computer) {
        @include zen-grid-item(4, 5);
      }
    }
    &:nth-child(3n) {
      @include at-breakpoint($computer) {
        @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;
}