Genera una grilla basandose en flex.

_flex-grid.scss

/**
* Genera una grilla basandose en flex.
*
* $gutter: espacio entre cada elemento. (px, em, etc)
* $itemsByLine: Cantidad de items por defecto. (numero entero)
* $breakpoints: mapa de "breakpoint" -> items.
*
* Usage:
* @include flex-grid(9px, 2, (bp-s-m: 3, bp-m: 4, bp-m-l:6));
* En este caso de uso por defecto de imprimen 2 items por fila con
* una separación de 9px entre ellos. A medida que aumentando
* el tamaño de pantalla la cantidad de items crece a 3, 4 y
* finalmente a 6 por fila.
*/
@mixin flex-grid($gutter, $itemsByLine, $breakpoints: ()) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // El gutter añade espacio extra a los bordes del grid.
  // Con un margen negativo lo contrarrestamos.
  margin: -$gutter;

  > * {
    padding: $gutter;
    width: 100% / $itemsByLine;
    box-sizing: border-box;

    @each $bp, $qty in $breakpoints {

      // @todo sustituir por un mixing de breakpoints independiente del framework.
      @include breakpoint(#{$bp}) {
        width: 100% / $qty;
      }

    }

  }

}