Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="container">Fluid gutters (2%) with nested items</p>
<div class="container">
  <article class="block"><div class="inline"></div></article>
  <article class="block"><div class="inline"></div></article>
  <article class="block block-nested">
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
  </article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
  <article class="block2"><div class="inline"></div></article>
  <article class="block2"><div class="inline"></div></article>
  <article class="block2 block-nested">
    <div class="block2"><div class="inline"></div></div>
    <div class="block2"><div class="inline"></div></div>
    <div class="block2"><div class="inline"></div></div>
  </article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
  <article class="block2"><div class="inline"></div></article>
  <article class="block2"><div class="inline"></div></article>
  <article class="block2 block-nested">
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
  </article>
</div>
<p class="container">Fixed gutters (20px) without nested items, still matching the layout of the previous grid with nested items.</p>
<div class="container">
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
</div>

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// Breakpoint (v2.0.7)
// Zen Grids (v1.4)
// ----

// Nested containers
// Variable gutter width vs fixed

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

$luigi: 600px 4;
$yoshi: 960px 12;
$zen-column-count: 12;
$zen-box-sizing: border-box;
$container-max-width: 1200px;
$zen-gutter-width: 2%;

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

.container {
  max-width: $container-max-width;
  margin: 0 auto 20px;
  overflow: auto;
}

article {
  height: 75px;
  box-sizing: border-box;
}

.block {
  width: 100%;
  background: pink;

  &:nth-child(3n + 1) {
    @include at-breakpoint($luigi) {
      @include zen-grid-item(2, 1, left);
      @include zen-clear(left);
    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(4, 1, left);
      @include zen-clear(left);
    }
  }

  &:nth-child(3n + 2) {
    @include at-breakpoint($luigi) {
      @include zen-grid-item(2, 3, left);
      @include zen-clear(none);
    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(4, 5, left);
      @include zen-clear(none);    
    }
  }

  &:nth-child(3n) {
    @include at-breakpoint($luigi) {
      @include zen-grid-item(2, 3, left);
      @include zen-clear(none);
    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(4, 9, left);
      @include zen-clear(none);
    }
  }
}

.block2 {
  $zen-gutter-width: 20px;
  width: 100%;
  background: pink;

  &:nth-child(3n + 1) {
    @include at-breakpoint($luigi) {
      @include zen-grid-item(2, 1, left);
      @include zen-clear(left);
    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(4, 1, left);
      @include zen-clear(left);
    }
  }

  &:nth-child(3n + 2) {
    @include at-breakpoint($luigi) {
      @include zen-grid-item(2, 3, left);
      @include zen-clear(none);
    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(4, 5, left);
      @include zen-clear(none);    
    }
  }

  &:nth-child(3n) {
    @include at-breakpoint($luigi) {
      @include zen-grid-item(2, 3, left);
      @include zen-clear(none);
    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(4, 9, left);
      @include zen-clear(none);
    }
  }
}

.block-nested:nth-child(3n) {
  @include at-breakpoint($luigi) {
    @include zen-nested-container();
  }
  @include at-breakpoint($yoshi) {
    @include zen-nested-container();
  }
}

.block2 > .block {
  &:nth-child(4n + 1) {
    @include at-breakpoint($luigi) {

    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(3, 1, left);
      @include zen-clear(left);
    }
  }

  &:nth-child(4n + 2) {
    @include at-breakpoint($luigi) {

    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(3, 4, left);
      @include zen-clear(none);
    }
  }

  &:nth-child(4n + 3) {
    @include at-breakpoint($luigi) {

    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(3, 7, left);
      @include zen-clear(none);    
    }
  }

  &:nth-child(4n) {
    @include at-breakpoint($luigi) {

    }
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(3, 10, left);
      @include zen-clear(none);
    }
  }
}

.block3 {
  $zen-gutter-width: 20px;
  width: 100%;
  background: pink;

  &:nth-child(1) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 1, left);
      @include zen-clear(left);
    }
  }

  &:nth-child(2) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 2, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(3) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 3, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(4) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 4, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(5) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 5, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(6) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 6, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(7) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 7, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(8) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 8, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(9) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 9, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(10) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 10, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(11) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 11, left);
      @include zen-clear(none);    
    }
  }
  
  &:nth-child(12) {
    @include at-breakpoint($yoshi) {
      @include zen-grid-item(1, 12, left);
      @include zen-clear(none);    
    }
  }
  
  
}

.inline {
  width: 100%;
  height: 75px;
  background: hotpink;
}

.block-nested .inline {
  background: deeppink;
}

.hotpink {
  background: hotpink;
}

SassMeister-output.css

.container {
  max-width: 1200px;
  margin: 0 auto 20px;
  overflow: auto;
}

article {
  height: 75px;
  box-sizing: border-box;
}

.block {
  width: 100%;
  background: pink;
}
@media (min-width: 600px) {
  .block:nth-child(3n + 1) {
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 1%;
    padding-right: 1%;
    -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: 960px) {
  .block:nth-child(3n + 1) {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
    padding-left: 1%;
    padding-right: 1%;
    -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: 600px) {
  .block:nth-child(3n + 2) {
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 1%;
    padding-right: 1%;
    -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 (min-width: 960px) {
  .block:nth-child(3n + 2) {
    float: left;
    width: 33.33333%;
    margin-left: 33.33333%;
    margin-right: -66.66667%;
    padding-left: 1%;
    padding-right: 1%;
    -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 (min-width: 600px) {
  .block:nth-child(3n) {
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 1%;
    padding-right: 1%;
    -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 (min-width: 960px) {
  .block:nth-child(3n) {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
    padding-left: 1%;
    padding-right: 1%;
    -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;
  }
}

.block2 {
  width: 100%;
  background: pink;
}
@media (min-width: 600px) {
  .block2:nth-child(3n + 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: left;
  }
}
@media (min-width: 960px) {
  .block2:nth-child(3n + 1) {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
    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: left;
  }
}
@media (min-width: 600px) {
  .block2:nth-child(3n + 2) {
    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 (min-width: 960px) {
  .block2:nth-child(3n + 2) {
    float: left;
    width: 33.33333%;
    margin-left: 33.33333%;
    margin-right: -66.66667%;
    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 (min-width: 600px) {
  .block2:nth-child(3n) {
    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 (min-width: 960px) {
  .block2:nth-child(3n) {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    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 (min-width: 600px) {
  .block-nested:nth-child(3n) {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 960px) {
  .block-nested:nth-child(3n) {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 960px) {
  .block2 > .block: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: left;
  }
}
@media (min-width: 960px) {
  .block2 > .block: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;
  }
}
@media (min-width: 960px) {
  .block2 > .block: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;
  }
}
@media (min-width: 960px) {
  .block2 > .block:nth-child(4n) {
    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;
  }
}

.block3 {
  width: 100%;
  background: pink;
}
@media (min-width: 960px) {
  .block3:nth-child(1) {
    float: left;
    width: 8.33333%;
    margin-left: 0%;
    margin-right: -8.33333%;
    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: left;
  }
}
@media (min-width: 960px) {
  .block3:nth-child(2) {
    float: left;
    width: 8.33333%;
    margin-left: 8.33333%;
    margin-right: -16.66667%;
    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 (min-width: 960px) {
  .block3:nth-child(3) {
    float: left;
    width: 8.33333%;
    margin-left: 16.66667%;
    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: none;
  }
}
@media (min-width: 960px) {
  .block3:nth-child(4) {
    float: left;
    width: 8.33333%;
    margin-left: 25%;
    margin-right: -33.33333%;
    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 (min-width: 960px) {
  .block3:nth-child(5) {
    float: left;
    width: 8.33333%;
    margin-left: 33.33333%;
    margin-right: -41.66667%;
    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 (min-width: 960px) {
  .block3:nth-child(6) {
    float: left;
    width: 8.33333%;
    margin-left: 41.66667%;
    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;
  }
}
@media (min-width: 960px) {
  .block3:nth-child(7) {
    float: left;
    width: 8.33333%;
    margin-left: 50%;
    margin-right: -58.33333%;
    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 (min-width: 960px) {
  .block3:nth-child(8) {
    float: left;
    width: 8.33333%;
    margin-left: 58.33333%;
    margin-right: -66.66667%;
    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 (min-width: 960px) {
  .block3:nth-child(9) {
    float: left;
    width: 8.33333%;
    margin-left: 66.66667%;
    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;
  }
}
@media (min-width: 960px) {
  .block3:nth-child(10) {
    float: left;
    width: 8.33333%;
    margin-left: 75%;
    margin-right: -83.33333%;
    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 (min-width: 960px) {
  .block3:nth-child(11) {
    float: left;
    width: 8.33333%;
    margin-left: 83.33333%;
    margin-right: -91.66667%;
    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 (min-width: 960px) {
  .block3:nth-child(12) {
    float: left;
    width: 8.33333%;
    margin-left: 91.66667%;
    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;
  }
}

.inline {
  width: 100%;
  height: 75px;
  background: hotpink;
}

.block-nested .inline {
  background: deeppink;
}

.hotpink {
  background: hotpink;
}

SassMeister-rendered.html

<p class="container">Fluid gutters (2%) with nested items</p>
<div class="container">
  <article class="block"><div class="inline"></div></article>
  <article class="block"><div class="inline"></div></article>
  <article class="block block-nested">
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
  </article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
  <article class="block2"><div class="inline"></div></article>
  <article class="block2"><div class="inline"></div></article>
  <article class="block2 block-nested">
    <div class="block2"><div class="inline"></div></div>
    <div class="block2"><div class="inline"></div></div>
    <div class="block2"><div class="inline"></div></div>
  </article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
  <article class="block2"><div class="inline"></div></article>
  <article class="block2"><div class="inline"></div></article>
  <article class="block2 block-nested">
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
    <div class="block"><div class="inline"></div></div>
  </article>
</div>
<p class="container">Fixed gutters (20px) without nested items, still matching the layout of the previous grid with nested items.</p>
<div class="container">
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
  <article class="block3"><div class="inline"></div></article>
</div>