Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test
    <br>666asfawf
    <br>666asfawf
    <br>666asfawf
  </div>
  <div>Test 777 </div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.1.0-beta)
// ----

@mixin gridup($item-width, $end-width, $start-width:0, $strategy:1, $layout:float){
  
  $mq: $start-width;
  $i: floor($start-width / $item-width) - 2;
  
  @if ($layout == 'float') {
    overflow: hidden;
    & > * {
      float: left;
      display: block;
    }
  }
  @if ($layout == 'inline-block') {
    font-size: 0;
    & > * {
      display:inline-block;
      font-size: 1rem;
      vertical-align: top;
    }
  }
  @if ($layout == 'flex'){
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    & > * {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    } 
  }
  
  @while($mq < $end-width){
    $mq: ($i * $item-width) + ($item-width * $strategy);
    $i: $i + 1;    
    
    @if (($mq > 0px) and ($mq >= $start-width)){
      @media (min-width: $mq) {
        & > *{ 
          width: 100% / $i;  
          @if($layout=="float"){
            &:nth-child(1) { clear: none; }
            &:nth-child(#{$i}n + 1) { clear: right; }
          }
        }
      } 
    }
    
  }
}

.grid {
  @include gridup(251px, 2100px, 10px, 0, 'flex'); 
  >*{
    padding: .5em;
    background:#ccc;
    outline: 1px solid #fff;
    box-sizing:border-box;
    min-height: 2em;
    margin-bottom: .5em;
  }
}

SassMeister-output.css

.grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .grid > * {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
  @media (min-width: 251px) {
    .grid > * {
      width: 50%; } }
  @media (min-width: 502px) {
    .grid > * {
      width: 33.33333%; } }
  @media (min-width: 753px) {
    .grid > * {
      width: 25%; } }
  @media (min-width: 1004px) {
    .grid > * {
      width: 20%; } }
  @media (min-width: 1255px) {
    .grid > * {
      width: 16.66667%; } }
  @media (min-width: 1506px) {
    .grid > * {
      width: 14.28571%; } }
  @media (min-width: 1757px) {
    .grid > * {
      width: 12.5%; } }
  @media (min-width: 2008px) {
    .grid > * {
      width: 11.11111%; } }
  @media (min-width: 2259px) {
    .grid > * {
      width: 10%; } }
  .grid > * {
    padding: .5em;
    background: #ccc;
    outline: 1px solid #fff;
    box-sizing: border-box;
    min-height: 2em;
    margin-bottom: .5em; }

SassMeister-rendered.html

<div class="grid">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test
    <br>666asfawf
    <br>666asfawf
    <br>666asfawf
  </div>
  <div>Test 777 </div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>