Flexbox grid extract from ionic http://ionicframework.com/docs/components/#grid . For a CSS version, you can transpile here https://www.sassmeister.com

_grid.scss

/**
 * Grid:
 * Using flexbox for the grid, inspired by Philip Walton:
 * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
 * By default each .col within a .row will evenly take up
 * available width, and the height of each .col with take
 * up the height of the tallest .col in the same .row.
 *
 *   @example
 *   <div class="row">
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2</p></div>
 *   </div>
 *   <div class="row">
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *   </div>
 *   <div class="row">
 *     <div class="col col-50"><p class="u-contentbg u-txtcenter">Col 1/2</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *   </div>
 *   <div class="row">
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
 *     <div class="col col-75"><p class="u-contentbg u-txtcenter">Col 3/4</p></div>
 *   </div>
 *   <div class="row responsive-sm">
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 sm responsive</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 sm responsive</p></div>
 *   </div>
 *   <div class="row responsive-md">
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 md responsive</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 md responsive</p></div>
 *   </div>
 *   <div class="row responsive-lg">
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 lg responsive</p></div>
 *     <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 lg responsive</p></div>
 *   </div>
 */

// -------------------------------

$grid-padding-width: 10px !default;
$grid-responsive-sm-break: 567px !default;  // smaller than landscape phone
$grid-responsive-md-break: 767px !default;  // smaller than portrait tablet
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet

// Flexbox Mixins
// --------------------------------------------------
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox

@mixin display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin display-inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

@mixin flex-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  @if $value == nowrap {
      -ms-flex-wrap: none;
  } @else {
      -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {
  -webkit-box-flex: $fg;
  -webkit-flex: $fg $fs $fb;
  -moz-box-flex: $fg;
  -moz-flex: $fg $fs $fb;
  -ms-flex: $fg $fs $fb;
  flex: $fg $fs $fb;
}

@mixin flex-flow($values: (row nowrap)) {
  // No Webkit Box fallback.
  -webkit-flex-flow: $values;
  -moz-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  -moz-align-items: $value;
  align-items: $value;
}

@mixin align-self($value: auto) {
  -webkit-align-self: $value;
  -moz-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

@mixin align-content($value: stretch) {
  -webkit-align-content: $value;
  -moz-align-content: $value;
  @if $value == flex-start {
    -ms-flex-line-pack: start;
  } @else if $value == flex-end {
    -ms-flex-line-pack: end;
  } @else {
    -ms-flex-line-pack: $value;
  }
  align-content: $value;
}

@mixin justify-content($value: stretch) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  } @else {
    -webkit-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}

@mixin flex-order($n) {
  -webkit-order: $n;
  -ms-flex-order: $n;
  order: $n;
  -webkit-box-ordinal-group: $n;
}

@mixin responsive-grid-break($selector, $max-width) {
  @media (max-width: $max-width) {
    #{$selector} {
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;

      .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
        @include flex(1);
        margin-bottom: ($grid-padding-width * 3) / 2;
        margin-left: 0;
        max-width: 100%;
        width: 100%;
      }
    }
  }
}

.row {
  @include display-flex();
  padding: ($grid-padding-width / 2);
  width: 100%;
}

.row-wrap {
  @include flex-wrap(wrap);
}

.row-no-padding {
  padding: 0;

  > .col {
    padding: 0;
  }
}

.row + .row {
  margin-top: ($grid-padding-width / 2) * -1;
  padding-top: 0;
}

.col {
  @include flex(1);
  display: block;
  padding: ($grid-padding-width / 2);
  width: 100%;
}


/* Vertically Align Columns */
/* .row-* vertically aligns every .col in the .row */
.row-top {
  @include align-items(flex-start);
}
.row-bottom {
  @include align-items(flex-end);
}
.row-center {
  @include align-items(center);
}
.row-stretch {
  @include align-items(stretch);
}
.row-baseline {
  @include align-items(baseline);
}

/* .col-* vertically aligns an individual .col */
.col-top {
  @include align-self(flex-start);
}
.col-bottom {
  @include align-self(flex-end);
}
.col-center {
  @include align-self(center);
}

/* Column Offsets */
.col-offset-10 {
  margin-left: 10%;
}
.col-offset-20 {
  margin-left: 20%;
}
.col-offset-25 {
  margin-left: 25%;
}
.col-offset-33, .col-offset-34 {
  margin-left: 33.3333%;
}
.col-offset-50 {
  margin-left: 50%;
}
.col-offset-66, .col-offset-67 {
  margin-left: 66.6666%;
}
.col-offset-75 {
  margin-left: 75%;
}
.col-offset-80 {
  margin-left: 80%;
}
.col-offset-90 {
  margin-left: 90%;
}


/* Explicit Column Percent Sizes */
/* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */
.col-10 {
  @include flex(0, 0, 10%);
  max-width: 10%;
}
.col-20 {
  @include flex(0, 0, 20%);
  max-width: 20%;
}
.col-25 {
  @include flex(0, 0, 25%);
  max-width: 25%;
}
.col-33, .col-34 {
  @include flex(0, 0, 33.3333%);
  max-width: 33.3333%;
}
.col-40 {
  @include flex(0, 0, 40%);
  max-width: 40%;
}
.col-50 {
  @include flex(0, 0, 50%);
  max-width: 50%;
}
.col-60 {
  @include flex(0, 0, 60%);
  max-width: 60%;
}
.col-66, .col-67 {
  @include flex(0, 0, 66.6666%);
  max-width: 66.6666%;
}
.col-75 {
  @include flex(0, 0, 75%);
  max-width: 75%;
}
.col-80 {
  @include flex(0, 0, 80%);
  max-width: 80%;
}
.col-90 {
  @include flex(0, 0, 90%);
  max-width: 90%;
}

/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */

@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);