Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid-wrapper">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import 'susy';

.grid-wrapper {
  max-width: 1024px;
  margin: 0 auto;
}

.grid-item {
  // defaults one across
  width: 100%;
  margin-bottom: 1rem;
  height: 100px;
  background-color: #ccc;
  
  // 3 across (4 cols of 12 cols)
  @media (min-width: 450px) {
    @include gallery(4 of 12);
  }
  
  // 4 across (3 cols of 12 cols)
  @media (min-width: 768px) {
    @include gallery(3 of 12);
  }
  
  // 6 across (2 cols of 12 cols)
  @media (min-width: 1024px) {
    @include gallery(2 of 12);
  }
}

SassMeister-output.css

.grid-wrapper {
  max-width: 1024px;
  margin: 0 auto;
}

.grid-item {
  width: 100%;
  margin-bottom: 1rem;
  height: 100px;
  background-color: #ccc;
}

@media (min-width: 450px) {
  .grid-item {
    width: 32.20339%;
    float: left;
  }
  .grid-item:nth-child(3n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0;
  }
  .grid-item:nth-child(3n + 2) {
    margin-left: 33.89831%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(3n + 3) {
    margin-left: 67.79661%;
    margin-right: -100%;
    clear: none;
  }
}

@media (min-width: 768px) {
  .grid-item {
    width: 23.72881%;
    float: left;
  }
  .grid-item:nth-child(4n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0;
  }
  .grid-item:nth-child(4n + 2) {
    margin-left: 25.42373%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(4n + 3) {
    margin-left: 50.84746%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(4n + 4) {
    margin-left: 76.27119%;
    margin-right: -100%;
    clear: none;
  }
}

@media (min-width: 1024px) {
  .grid-item {
    width: 15.25424%;
    float: left;
  }
  .grid-item:nth-child(6n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0;
  }
  .grid-item:nth-child(6n + 2) {
    margin-left: 16.94915%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(6n + 3) {
    margin-left: 33.89831%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(6n + 4) {
    margin-left: 50.84746%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(6n + 5) {
    margin-left: 67.79661%;
    margin-right: -100%;
    clear: none;
  }
  .grid-item:nth-child(6n + 6) {
    margin-left: 84.74576%;
    margin-right: -100%;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="grid-wrapper">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>