For converting Grid Spec 2 to Grid Spec 1

_cssgrid.scss

// ===================================================
// CSS Grid Layout Helper
//
// To convert some of the CSS Grid Spec 2 features to Spec 1
//
// Author: Sascha Fuchs
//
// ===================================================

/// Add Gap between the boxes
///
/// @group core - cssgrid
///
/// @param   {list}    $boxes - List with box sizes
/// @param   {string}  $gap - Optional column gap
@function box-gap($boxes, $gap) {
  $box: ();

  @for $i from 1 through length($boxes) {
    $box: append($box, nth($boxes, $i), space);

    // Adding Gap Between
    @if $gap > 0 {
      // Not last Loop
      @if $i != length($boxes) {
        $box: append($box, $gap, space);
      }
    }
  }

  @return $box;
}

/// To build Grid Template Columns with optional gap
///
/// @group core - cssgrid
///
/// @param   {string}  $gap - Optional column gap
/// @param   {list}    $columns - Columns sizes
///
/// @require {function} box-gap
///
/// @example scss - scss
///   .test {
///     @include grid-columns(10px 250px 1fr 50px 100px);
///   }
@mixin grid-columns($gap, $columns) {
  /* autoprefixer: off */
  grid-template-columns: $columns;
  /* autoprefixer: on */
  @if $gap > 0 {
    grid-column-gap: $gap;
  }

  .old-grid-spec & {
    -ms-grid-columns: box-gap($columns, $gap);
  }
}

/// To build Grid Template Rows with optional gap
///
/// @group core - cssgrid
///
/// @param   {string}  $gap - Optional row gap
/// @param   {list}    $rows - Rows sizes
///
/// @require {function} box-gap
///
/// @example scss - scss
///   .test {
///     @include grid-rows(10px 1fr);
///   }
@mixin grid-rows($gap, $rows) {
  /* autoprefixer: off */
  grid-template-rows: $rows;
  /* autoprefixer: on */
  @if $gap > 0 {
    grid-row-gap: $gap;
  }

  .old-grid-spec & {
    -ms-grid-rows: box-gap($rows, $gap);
  }
}

/// Generate a Grid Template Area from a Grid Map
///
/// @group core - cssgrid
///
/// @param   {string}  $area - Name of the Area
/// @param   {map}     $map - Map of your grid area matrix
///
/// @example scss - scss
///    $gridAreaMap: (
///      row1: ('logo', 'nav', 'nav', 'nav'),
///      row2: ('logo', 'empty', 'search', 'search')
///    );
///    @include grid-matrix($gridAreaMap);
@mixin grid-matrix($map) {
  $matrix: ();

  @each $index, $row in $map {
    $list: null;

    @for $i from 1 through length($row) {
      $list: append($list, unquote(nth(($row), $i)), space);
    }

    $matrix: append($matrix, quote($list), space);
  }

  grid-template-areas: $matrix;
}

/// Generate Coordinates based on Grid Matrix and the selected area
///
/// @group core - cssgrid
///
/// @param   {string}  $area - Name of the Area
/// @param   {map}     $map - Map of your grid area matrix
/// @param   {bool}    $columnGap - If you use Gap for Columns
/// @param   {bool}    $rowGap - If you use Gap for Rows
///
/// @example scss - scss
///    $gridAreaMap: (
///      row1: ('logo', 'nav', 'nav', 'nav'),
///      row2: ('logo', 'empty', 'search', 'search')
///    );
///    @include grid-area(logo, $gridAreaMap, true);
@mixin grid-area($area, $map, $columnGap: false, $rowGap: false) {
  // Init Vars
  $gridColumnStart: '';
  $gridColumnEnd: '';
  $gridRows: ();
  $gridRowHeight: '';
  $areaExists: 0;

  // Output regular Area
  grid-area: $area;

  // Generate Old Spec Coordinates based on Area
  .old-grid-spec & {
    // Get Width element
    @for $i from 1 through length($map) {
      @if sl-contain(map-get($map,row#{$i}), $area) {
        $areaExists: append($areaExists, 1);
        $gridRowHeight: append($gridRowHeight, $i);
        $gridColumnStart: index(map-get($map,row#{$i}), $area);
        $gridColumnEnd: sl-last-index(map-get($map,row#{$i}), $area);
        $gridRows: append($gridRows, $i);
      }
    }

    // If Area exists in the Map
    @if length($areaExists) > 1 {
      // Convert Coordinate if Column Gap is active
      @if $columnGap {
        -ms-grid-column: $gridColumnStart + ($gridColumnStart - 1);
        -ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1 + ($gridColumnEnd - $gridColumnStart);

      } @else {
        -ms-grid-column: $gridColumnStart;
        -ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1;
      }

      // Add Row Coordinates
      @if $rowGap {
        -ms-grid-row: nth($gridRows,1) + (nth($gridRows,1) - 1);
        -ms-grid-row-span: length($gridRowHeight) - 1 + (length($gridRowHeight) - 2);

      } @else {
        -ms-grid-row: nth($gridRows,1);
        -ms-grid-row-span: length($gridRowHeight) - 1;
      }
    }
  }
}

Add Bowser.js for generate Classes based on User Agents. In this case i combined, IE10 - 11 and Edge 12 - 15 to generate .old-grid-spec class as my Fallback Class.

Example

/*
  PageFooter
  ==========
  Footer Styling
*/
.c-pageFooter {
  $api: (
    breakpoint: 'm',
    breaksizes: (
      one: glob(footer, breaksizes, one)
    ),
    grid: (
      general: (
        column-gap: 20px,
        row-gap: 20px
      ),
      setup1: (
        breakpoint: 'sm',
        columns: 1fr 1fr 1fr 230px,
        rows: 1fr 1fr,
        areas: (
          row1: ('about', 'about', 'learn', 'learn'),
          row2: ('legal', 'legal', 'social', 'social')
        )
      ),
      setup2: (
        breakpoint: 'm',
        columns: 1fr 1fr 1fr 230px,
        rows: 1fr,
        areas: (
          row1: ('about', 'learn', 'legal', 'social')
        )
      )
    ),
    background: c('black'),
    vertpadding: s(2)
  );

  // ::::::::: ROOT SELECTOR
  $root: #{&};
  $rn: str_slice($root, 4);

  // ::::::::: API GRABBER
  @function api($keys...) {
    @return map-deep-get($api, $keys...);
  }

  // ::::::::: BASE
  //background-color: api(background);
  padding-top: api(vertpadding);
  padding-bottom: api(vertpadding);
  @extend %e-container;
  position: relative;

  @include break(api(grid, setup1, breakpoint)) {
    display: grid;
    display: -ms-grid;
    @include grid-matrix(api(grid, setup1, areas));
    @include grid-columns(api(grid, general, column-gap), api(grid, setup1, columns));
    @include grid-rows(api(grid, general, row-gap), api(grid, setup1, rows));
  }

  @include break(api(grid, setup2, breakpoint)) {
    @include grid-matrix(api(grid, setup2, areas));
    @include grid-columns(api(grid, general, column-gap), api(grid, setup2, columns));
    @include grid-rows(api(grid, general, row-gap), api(grid, setup2, rows));
  }

  &:before {
    content: '';
    width: 100vw;
    display: block;
    background-color: api(background);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  // ::::::::: TAGS
  // ::::::::: MODIFIER
  // ::::::::: CHILDS

  // [root]__block
  &__block {
    margin-bottom: 20px;
    @include break(api(grid, setup1, breakpoint)) {
      margin-bottom: 0;
    }
  }

  // [root]__headline
  &__headline {
    color: c('white');
    font-size: rem(16);
    text-transform: uppercase;
    @include fluid(5px, 20px, margin-bottom);
  }
  // [root]__about
  &__about {
    @include grid-area(about, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(about, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }

  // [root]__learn
  &__learn {
    @include grid-area(learn, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(learn, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }

  // [root]__legal
  &__legal {
    @include grid-area(legal, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(legal, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }

  // [root]__social
  &__social {
    @include grid-area(social, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    //align-self: end;

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(social, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }
}

@gisu Can you provide a codepen? Please??
This is awesome BTW?