Generated by SassMeister.com.

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>

SassMeister-input.scss

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

@import "zen";

//
// @file _breakpoint-grid-breakdown.scss
//   Used to create grids with dynamic numbers of columns across
//   different breakpoints.
//
// http://www.chromaticsites.com/blog/responsive-grid-building-sass-and-zen-grids-tale-breakpoint-grid-breakdown-mixin
//
// Example usage:
//   .view-id-fancy-grid {
//     @include breakpoint-grid-breakdown(1 2 4);
//   }
//   .list-of-items {
//     @include breakpoint-grid-breakdown(1 2, $breakpoint-mobile $breakpoint-desktop, '.list-item');
//   }

// Example breakpoint variables.
$breakpoint-mobile: 320px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 960px;

// Breakpoint
// A simple breakpoint mixin used within breakpoint-grid-breakdown.
// Can be passed pixel values or previously defined breakpoint variables.
@mixin breakpoint($breakpoint-size) {
  @media all and (min-width: $breakpoint-size) {
    @content;
  }
}

// Breakpoint Grid Breakdown
// Displays a grid of items with a dynamic column count across breakpoints.
// For use with Zen Grids and a breakpoint-oriented mixin.
// @author Gus Childs http://drupal.org/user/1468898
//
// @param list $column-counts
//   A list of how many columns should exist on the respective breakpoints.
// @param list $breakpoints
//   A list of breakpoints to be used in the 'breakpoint' mixin. Corresponds
//   directly with the $column-counts list. Defaults to those commonly used.
// @param string $selector
//   The selector of each individual grid item. Defaults to 'views-row'.
@mixin breakpoint-grid-breakdown($column-counts, $breakpoints: $breakpoint-mobile $breakpoint-tablet $breakpoint-desktop, $selector: '> div') {
  #{$selector} {
    @each $breakpoint in $breakpoints {
      $key: index($breakpoints, $breakpoint);
      $column-count: nth($column-counts, $key);

      @include breakpoint($breakpoint) {
        @for $i from 1 through $column-count {
          $remainder: $i % $column-count;
          &:nth-child(#{$column-count}n+#{$remainder}) {
            $page-grid-column-span: $zen-column-count / $column-count;
            $page-grid-column-position: 1 + (($i - 1) * $page-grid-column-span);
            @include zen-grid-item($page-grid-column-span, $page-grid-column-position);
            @if $remainder == 1 or $column-count == 1 {
              clear: both;
            } @else {
              clear: none;
            }
          }
        }
      }
    }
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.container {
  @include breakpoint-grid-breakdown(1 2 4);
  //@include breakpoint-grid-breakdown(1 2 4, $breakpoint-mobile $breakpoint-tablet $breakpoint-desktop, '.column');
}

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

SassMeister-output.css

@media all and (min-width: 320px) {
  .container > div:nth-child(1n+0) {
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: both;
  }
}
@media all and (min-width: 768px) {
  .container > div:nth-child(2n+1) {
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: both;
  }
  .container > div:nth-child(2n+0) {
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
}
@media all and (min-width: 960px) {
  .container > div:nth-child(4n+1) {
    float: left;
    width: 25%;
    margin-left: 0%;
    margin-right: -25%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: both;
  }
  .container > div:nth-child(4n+2) {
    float: left;
    width: 25%;
    margin-left: 25%;
    margin-right: -50%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
  .container > div:nth-child(4n+3) {
    float: left;
    width: 25%;
    margin-left: 50%;
    margin-right: -75%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
  .container > div:nth-child(4n+0) {
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

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