// Based on https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
// This CSS Grid mixin and styles allow modern browsers to use the newer display: grid functionality, 
// but allow a fallback to Flexbox to support older browsers like IE 11.

@mixin basic-styles {
  display: flex;
  align-items: center; // Vertically center all content
}

@mixin grid-child ($col-start, $col-end, $row-start, $row-end) {
  -ms-grid-column: $col-start;
  -ms-grid-column-span: $col-end - $col-start;
  -ms-grid-row: $row-start;
  -ms-grid-row-span: $row-end - $row-start;
  grid-column: #{$col-start}/#{$col-end};
  grid-row: #{$row-start}/#{$row-end};
}

.grid-parent {
  display: -ms-grid;
  @supports (display: grid) { // Modern browser support
    display: grid;
  }
}

.grid-child {
  @include basic-styles;

  @supports (display: grid) {
    grid-gap: 20px;
  }
}

.container {
  -ms-grid-columns: 1fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
}

.column1 {
  @include grid-child(1,2,1,1);
}

.column2 {
  @include grid-child(2,3,1,1);
}

.column3 {
  @include grid-child(3,3,1,1);
}