Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="ctn-container">
  <div class="ctn-grid-24"><span class="box-grid">24</span></div>
  
  <div class="ctn-grid-1"><span class="box-grid">1</span></div>
  <div class="ctn-grid-23"><span class="box-grid">23</span></div>
  
  <div class="ctn-grid-2"><span class="box-grid">2</span></div>
  <div class="ctn-grid-22"><span class="box-grid">22</span></div>
  
  <div class="ctn-grid-3"><span class="box-grid">3</span></div>
  <div class="ctn-grid-21"><span class="box-grid">21</span></div>
  
  <div class="ctn-grid-4"><span class="box-grid">4</span></div>
  <div class="ctn-grid-20"><span class="box-grid">20</span></div>
  
  <div class="ctn-grid-5"><span class="box-grid">5</span></div>
  <div class="ctn-grid-19"><span class="box-grid">19</span></div>
  
  <div class="ctn-grid-6"><span class="box-grid">6</span></div>
  <div class="ctn-grid-18"><span class="box-grid">18</span></div>
  
  <div class="ctn-grid-7"><span class="box-grid">7</span></div>
  <div class="ctn-grid-17"><span class="box-grid">17</span></div>
  
  <div class="ctn-grid-8"><span class="box-grid">8</span></div>
  <div class="ctn-grid-16"><span class="box-grid">16</span></div>
  
  <div class="ctn-grid-9"><span class="box-grid">9</span></div>
  <div class="ctn-grid-15"><span class="box-grid">15</span></div>
  
  <div class="ctn-grid-10"><span class="box-grid">10</span></div>
  <div class="ctn-grid-14"><span class="box-grid">14</span></div>
  
  <div class="ctn-grid-11"><span class="box-grid">11</span></div>
  <div class="ctn-grid-13"><span class="box-grid">13</span></div>
  
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.ctn-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
  
  height: 100%;
  width: 100%;
  
  .box-grid {
    background: #DDD;
    border: 1px solid #333;
    display: block;
    margin: 5px 0;
    padding: 1em;
  }
}

$class: 'ctn-grid';
$columns: 24;
$t-columns: 12;
$m-columns: 6;
$width: 100;

@function grid-percent($grid-columns, $container-width, $i) {
  $percent: 100 / $grid-columns * $i * 1%;
  @return $percent;
}

@for $i from 1 through $columns {
  .#{$class}-#{$i} {
    flex: grid-percent($columns, $width, $i);
    max-width: grid-percent($columns, $width, $i);
    //flex: $i auto;
    //width: grid-percent($columns, $width, $i);
  }
}


@media screen and (max-width: 960px) {
  .ctn-container {
    width: 100%;
  }

  $columns-count: 24;
  @for $i from 1 through $columns-count {
    @if $i < $t-columns + 1 {
      .#{$class}-#{$i} {
        flex: grid-percent($t-columns, $width, $i);
        max-width: grid-percent($t-columns, $width, $i);
      }
    }
    @if $i > $t-columns + 1 {
      .#{$class}-#{$i} {
        @extend %grid-full;
      }
    }
  }
  
  %grid-full {
    flex: 100%;
  }
}



@media screen and (max-width: 480px) {
  .ctn-container {
    width: 100%;
  }

  $columns-count: 24;
  @for $i from 1 through $columns-count {
    @if $i < $m-columns + 1 {
      .#{$class}-#{$i} {
        flex: grid-percent($m-columns, $width, $i);
        max-width: grid-percent($m-columns, $width, $i);
      }
    }
    @if $i > $m-columns + 1 {
      .#{$class}-#{$i} {
        @extend %m-grid-full;
      }
    }
  }
  
  %m-grid-full {
    flex: 100%;
  }
}

SassMeister-output.css

.ctn-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
  height: 100%;
  width: 100%; }
  .ctn-container .box-grid {
    background: #DDD;
    border: 1px solid #333;
    display: block;
    margin: 5px 0;
    padding: 1em; }

.ctn-grid-1 {
  flex: 4.16666667%;
  max-width: 4.16666667%; }

.ctn-grid-2 {
  flex: 8.33333333%;
  max-width: 8.33333333%; }

.ctn-grid-3 {
  flex: 12.5%;
  max-width: 12.5%; }

.ctn-grid-4 {
  flex: 16.66666667%;
  max-width: 16.66666667%; }

.ctn-grid-5 {
  flex: 20.83333333%;
  max-width: 20.83333333%; }

.ctn-grid-6 {
  flex: 25%;
  max-width: 25%; }

.ctn-grid-7 {
  flex: 29.16666667%;
  max-width: 29.16666667%; }

.ctn-grid-8 {
  flex: 33.33333333%;
  max-width: 33.33333333%; }

.ctn-grid-9 {
  flex: 37.5%;
  max-width: 37.5%; }

.ctn-grid-10 {
  flex: 41.66666667%;
  max-width: 41.66666667%; }

.ctn-grid-11 {
  flex: 45.83333333%;
  max-width: 45.83333333%; }

.ctn-grid-12 {
  flex: 50%;
  max-width: 50%; }

.ctn-grid-13 {
  flex: 54.16666667%;
  max-width: 54.16666667%; }

.ctn-grid-14 {
  flex: 58.33333333%;
  max-width: 58.33333333%; }

.ctn-grid-15 {
  flex: 62.5%;
  max-width: 62.5%; }

.ctn-grid-16 {
  flex: 66.66666667%;
  max-width: 66.66666667%; }

.ctn-grid-17 {
  flex: 70.83333333%;
  max-width: 70.83333333%; }

.ctn-grid-18 {
  flex: 75%;
  max-width: 75%; }

.ctn-grid-19 {
  flex: 79.16666667%;
  max-width: 79.16666667%; }

.ctn-grid-20 {
  flex: 83.33333333%;
  max-width: 83.33333333%; }

.ctn-grid-21 {
  flex: 87.5%;
  max-width: 87.5%; }

.ctn-grid-22 {
  flex: 91.66666667%;
  max-width: 91.66666667%; }

.ctn-grid-23 {
  flex: 95.83333333%;
  max-width: 95.83333333%; }

.ctn-grid-24 {
  flex: 100%;
  max-width: 100%; }

@media screen and (max-width: 960px) {
  .ctn-container {
    width: 100%; }

  .ctn-grid-1 {
    flex: 8.33333333%;
    max-width: 8.33333333%; }

  .ctn-grid-2 {
    flex: 16.66666667%;
    max-width: 16.66666667%; }

  .ctn-grid-3 {
    flex: 25%;
    max-width: 25%; }

  .ctn-grid-4 {
    flex: 33.33333333%;
    max-width: 33.33333333%; }

  .ctn-grid-5 {
    flex: 41.66666667%;
    max-width: 41.66666667%; }

  .ctn-grid-6 {
    flex: 50%;
    max-width: 50%; }

  .ctn-grid-7 {
    flex: 58.33333333%;
    max-width: 58.33333333%; }

  .ctn-grid-8 {
    flex: 66.66666667%;
    max-width: 66.66666667%; }

  .ctn-grid-9 {
    flex: 75%;
    max-width: 75%; }

  .ctn-grid-10 {
    flex: 83.33333333%;
    max-width: 83.33333333%; }

  .ctn-grid-11 {
    flex: 91.66666667%;
    max-width: 91.66666667%; }

  .ctn-grid-12 {
    flex: 100%;
    max-width: 100%; }

  .ctn-grid-14, .ctn-grid-15, .ctn-grid-16, .ctn-grid-17, .ctn-grid-18, .ctn-grid-19, .ctn-grid-20, .ctn-grid-21, .ctn-grid-22, .ctn-grid-23, .ctn-grid-24 {
    flex: 100%; } }
@media screen and (max-width: 480px) {
  .ctn-container {
    width: 100%; }

  .ctn-grid-1 {
    flex: 16.66666667%;
    max-width: 16.66666667%; }

  .ctn-grid-2 {
    flex: 33.33333333%;
    max-width: 33.33333333%; }

  .ctn-grid-3 {
    flex: 50%;
    max-width: 50%; }

  .ctn-grid-4 {
    flex: 66.66666667%;
    max-width: 66.66666667%; }

  .ctn-grid-5 {
    flex: 83.33333333%;
    max-width: 83.33333333%; }

  .ctn-grid-6 {
    flex: 100%;
    max-width: 100%; }

  .ctn-grid-8, .ctn-grid-9, .ctn-grid-10, .ctn-grid-11, .ctn-grid-12, .ctn-grid-13, .ctn-grid-14, .ctn-grid-15, .ctn-grid-16, .ctn-grid-17, .ctn-grid-18, .ctn-grid-19, .ctn-grid-20, .ctn-grid-21, .ctn-grid-22, .ctn-grid-23, .ctn-grid-24 {
    flex: 100%; } }

SassMeister-rendered.html

<div class="ctn-container">
  <div class="ctn-grid-24"><span class="box-grid">24</span></div>
  
  <div class="ctn-grid-1"><span class="box-grid">1</span></div>
  <div class="ctn-grid-23"><span class="box-grid">23</span></div>
  
  <div class="ctn-grid-2"><span class="box-grid">2</span></div>
  <div class="ctn-grid-22"><span class="box-grid">22</span></div>
  
  <div class="ctn-grid-3"><span class="box-grid">3</span></div>
  <div class="ctn-grid-21"><span class="box-grid">21</span></div>
  
  <div class="ctn-grid-4"><span class="box-grid">4</span></div>
  <div class="ctn-grid-20"><span class="box-grid">20</span></div>
  
  <div class="ctn-grid-5"><span class="box-grid">5</span></div>
  <div class="ctn-grid-19"><span class="box-grid">19</span></div>
  
  <div class="ctn-grid-6"><span class="box-grid">6</span></div>
  <div class="ctn-grid-18"><span class="box-grid">18</span></div>
  
  <div class="ctn-grid-7"><span class="box-grid">7</span></div>
  <div class="ctn-grid-17"><span class="box-grid">17</span></div>
  
  <div class="ctn-grid-8"><span class="box-grid">8</span></div>
  <div class="ctn-grid-16"><span class="box-grid">16</span></div>
  
  <div class="ctn-grid-9"><span class="box-grid">9</span></div>
  <div class="ctn-grid-15"><span class="box-grid">15</span></div>
  
  <div class="ctn-grid-10"><span class="box-grid">10</span></div>
  <div class="ctn-grid-14"><span class="box-grid">14</span></div>
  
  <div class="ctn-grid-11"><span class="box-grid">11</span></div>
  <div class="ctn-grid-13"><span class="box-grid">13</span></div>
  
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
</div>