SCSS Grid Mixins for IE11

One of the caveats of IE11 is that it does not support autoplacement. This is a tricky thing to polyfill, though there are solutions out that may way work for you. I recommend CSS Grid in IE by Daniel Tonon for some great information about IE11 and grid.

Grid

@mixin grid() {
  display: grid;
  display: -ms-grid;
}

Column properties

@mixin grid-column($column) {
  grid-column: $column;
  -ms-grid-column: $column;
}

@mixin grid-template-columns($val) {
  grid-template-columns: $val;
  -ms-grid-columns: $val;
}

@mixin grid-template-columns-repeat($columns, $width) {
  grid-template-columns: repeat($columns, $width);
  -ms-grid-columns: unquote("(" + $width + ")[" + $columns + "]");
}

@mixin grid-column-span($start, $end) {
  grid-column: unquote($start + "/" + $end);
  -ms-grid-column: $start;
  -ms-grid-column-span: $end - 1;
}

Row properties

@mixin grid-row($row) {
  grid-row: $row;
  -ms-grid-row: $row;
}

@mixin grid-template-rows($val) {
  grid-template-rows: $val;
  -ms-grid-rows: $val;
}

@mixin grid-template-rows-repeat($rows, $width) {
  grid-template-rows: repeat($rows, $width);
  -ms-grid-rows: unquote("(" + $width + ")[" + $rows + "]");
}

@mixin grid-row-span($start, $end) {
  grid-row: unquote($start + "/" + $end);
  -ms-grid-row: $start;
  -ms-grid-row-span: $end - 1;
}

Alignment properties

@mixin justify-self($position) {
  justify-self: $position;
  -ms-grid-column-align: $position;
}