Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid-container">

  <ul class="media-grid media-grid--2">
    <li><img src="//placehold.it/400x300"><h3>Headline this might get a bit long just to show off flexbox handling</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--3">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--4">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>This should be handled correctly even when flexbox isn't available</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--5">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--6">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>

</div>

SassMeister-input.scss

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

// This is a mixin to scratch a very specific itch I had on a project. 
// It's not intended as a full-page grid system, although I suppose
// it probably could be used for that. I'll probably adapt this for
// floats, or make flexbox an option.

// Some breakpoints to get started
$small-1: 480px;
$small-2: 568px;
$small-3: 600px;
$med-1: 768px;
$med-2: 900px;
$med-3: 1025px;
$large-1: 1100px;
$large-2: 1280px;
$max-width: $large-2;

// Defaults
$pad-half: 8px;
$pad: 15px;

// Our breakpoints map
// The keys in the parent map don't need to be numbers.
// The child keys do need to be numbers.
// The values in the lists are `breakpoint, colums`
$media-grid: (
  2: (
    1: ($med-2, 2)
  ),
  3: (
    1: ($med-2, 2),
    2: ($max-width, 3)
  ),
  4: (
    1: ($med-2, 2),
    2: ($med-3, 3),
    3: ($max-width, 4 )
  ),
  5: (
    1: ($med-2, 2),
    2: ($med-3, 3),
    3: ($large-1, 4),
    4: ($max-width, 5)
  ),
  6: (
    1: ($med-2, 2),
    2: ($med-3, 3),
    3: ($large-1, 5),
    4: ($max-width, 6)
  )
);

/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
      $map: map-get($map, $key);
  }
  @return $map;
}

@function strip-units($value) {
	@return $value / ($value * 0 + 1);
}

/// Align lists (or any group of items) into arbitrary grids at arbitrary breakpoints
/// @name media-grid
/// @author Chris Coleman
/// @param {string} $base-class [media-grid] - Base class to generate
/// @group layout
/// @example
///   @include media-grid(media-grid, $media-grid, no-flexbox);
@mixin media-grid($base-class, $grids, $fallback-class: no-flexbox) {
  .#{$base-class} {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      flex: 0 0 100%;
      margin: 0;
    }
  }

  @each $cols, $bp in $grids {
    .#{$base-class}--#{$cols} li {
      @for $i from 1 through length($bp) {

        $columns: nth(map-deep-get($grids, $cols, nth($i, 1)), 2);
        $currentBreak: nth(map-deep-get($grids, $cols, nth($i, 1)), 1);
        $nextBreak: nth(map-deep-get($grids, $cols, nth($i + 1, 1)), 1);
        
        @if $nextBreak {
          $mediaFeature: "(min-width: #{$currentBreak}) and (max-width: #{$nextBreak})";
        } @else {
          $mediaFeature: "(min-width: #{$currentBreak})";
        }

        @media #{$mediaFeature} {
          flex: 0 0 100/$columns + %;
          float: left;
          background: #bdc3c7;
          
          .#{$fallback-class} &:nth-child(#{$columns}n + #{$columns + 1}) {
            width: 100/$columns + %;
            max-width: #{100/$columns + %};
            clear: left;
          }
        }
      }
    }
  }
}

// Create the classes.
@include media-grid(media-grid, $media-grid);


// Some styles for demonstration
* {
  box-sizing: border-box;
}

body {
  background: #ecf0f1;
  margin: 0;
  font-family: Avenir Next;
}

.grid-container {
  max-width: 900px;
  margin: 1rem auto;
  overflow: hidden;
}

.media-grid {
  margin: 1rem auto;
  
  &:after {
    display: table;
    content: " ";
    clear: both;
  }
  
  li {
    text-align: center;
    color: #2c3e50;
    padding: pad-half;
    @media(min-width: $med-3) {
      padding: $pad;
    }
  }
  
  h3 {
    margin: 0 0 .5rem 0;
    text-align: left;
  }
  
  img {
    width: 100%;
  }
}

SassMeister-output.css

.media-grid {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
  list-style: none; }
  .media-grid li {
    flex: 0 0 100%;
    margin: 0; }

@media (min-width: 900px) {
  .media-grid--2 li {
    flex: 0 0 50%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--2 li:nth-child(2n+3) {
      width: 50%;
      max-width: 50%;
      clear: left; } }

@media (min-width: 900px) and (max-width: 1280px) {
  .media-grid--3 li {
    flex: 0 0 50%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--3 li:nth-child(2n+3) {
      width: 50%;
      max-width: 50%;
      clear: left; } }
@media (min-width: 1280px) {
  .media-grid--3 li {
    flex: 0 0 33.33333%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--3 li:nth-child(3n+4) {
      width: 33.33333%;
      max-width: 33.33333%;
      clear: left; } }

@media (min-width: 900px) and (max-width: 1025px) {
  .media-grid--4 li {
    flex: 0 0 50%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--4 li:nth-child(2n+3) {
      width: 50%;
      max-width: 50%;
      clear: left; } }
@media (min-width: 1025px) and (max-width: 1280px) {
  .media-grid--4 li {
    flex: 0 0 33.33333%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--4 li:nth-child(3n+4) {
      width: 33.33333%;
      max-width: 33.33333%;
      clear: left; } }
@media (min-width: 1280px) {
  .media-grid--4 li {
    flex: 0 0 25%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--4 li:nth-child(4n+5) {
      width: 25%;
      max-width: 25%;
      clear: left; } }

@media (min-width: 900px) and (max-width: 1025px) {
  .media-grid--5 li {
    flex: 0 0 50%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--5 li:nth-child(2n+3) {
      width: 50%;
      max-width: 50%;
      clear: left; } }
@media (min-width: 1025px) and (max-width: 1100px) {
  .media-grid--5 li {
    flex: 0 0 33.33333%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--5 li:nth-child(3n+4) {
      width: 33.33333%;
      max-width: 33.33333%;
      clear: left; } }
@media (min-width: 1100px) and (max-width: 1280px) {
  .media-grid--5 li {
    flex: 0 0 25%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--5 li:nth-child(4n+5) {
      width: 25%;
      max-width: 25%;
      clear: left; } }
@media (min-width: 1280px) {
  .media-grid--5 li {
    flex: 0 0 20%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--5 li:nth-child(5n+6) {
      width: 20%;
      max-width: 20%;
      clear: left; } }

@media (min-width: 900px) and (max-width: 1025px) {
  .media-grid--6 li {
    flex: 0 0 50%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--6 li:nth-child(2n+3) {
      width: 50%;
      max-width: 50%;
      clear: left; } }
@media (min-width: 1025px) and (max-width: 1100px) {
  .media-grid--6 li {
    flex: 0 0 33.33333%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--6 li:nth-child(3n+4) {
      width: 33.33333%;
      max-width: 33.33333%;
      clear: left; } }
@media (min-width: 1100px) and (max-width: 1280px) {
  .media-grid--6 li {
    flex: 0 0 20%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--6 li:nth-child(5n+6) {
      width: 20%;
      max-width: 20%;
      clear: left; } }
@media (min-width: 1280px) {
  .media-grid--6 li {
    flex: 0 0 16.66667%;
    float: left;
    background: #bdc3c7; }
    .no-flexbox .media-grid--6 li:nth-child(6n+7) {
      width: 16.66667%;
      max-width: 16.66667%;
      clear: left; } }

* {
  box-sizing: border-box; }

body {
  background: #ecf0f1;
  margin: 0;
  font-family: Avenir Next; }

.grid-container {
  max-width: 900px;
  margin: 1rem auto;
  overflow: hidden; }

.media-grid {
  margin: 1rem auto; }
  .media-grid:after {
    display: table;
    content: " ";
    clear: both; }
  .media-grid li {
    text-align: center;
    color: #2c3e50;
    padding: pad-half; }
    @media (min-width: 1025px) {
      .media-grid li {
        padding: 15px; } }
  .media-grid h3 {
    margin: 0 0 .5rem 0;
    text-align: left; }
  .media-grid img {
    width: 100%; }

SassMeister-rendered.html

<div class="grid-container">

  <ul class="media-grid media-grid--2">
    <li><img src="//placehold.it/400x300"><h3>Headline this might get a bit long just to show off flexbox handling</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--3">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--4">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>This should be handled correctly even when flexbox isn't available</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--5">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>
  
  <ul class="media-grid media-grid--6">
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
    <li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
  </ul>

</div>