Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Bourbon (v4.0.2)
// Susy (v2.1.2)
// ----

@import "bourbon/bourbon";
@import "susy";

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: outside,
);
.container{
    @include container( 900px );
    position: relative;
}

.block{
  @include gallery(4 of 12);
  background-color: tomato;
  height: 200px;
  margin-bottom: 1em;
  
  @media(max-width: 60em){
    @include gallery(12 of 12);
  }
}

SassMeister-output.css

.container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.block {
  width: 32.20339%;
  float: left;
  background-color: tomato;
  height: 200px;
  margin-bottom: 1em;
}
.block:nth-child(3n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}
.block:nth-child(3n + 2) {
  margin-left: 33.89831%;
  margin-right: -100%;
  clear: none;
}
.block:nth-child(3n + 3) {
  margin-left: 67.79661%;
  margin-right: -100%;
  clear: none;
}
@media (max-width: 60em) {
  .block {
    width: 100%;
    float: left;
  }
  .block:nth-child(1n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>