fix(grid): fix gutter for all browsers (#21)

* fix(grid): fix gutter for all browsers

* deploy

* fix(mixin): change the span mixin

Author: Celeste Glavin

packages/core/src/global/material-grid/_mixins.scss

@@ -86,9 +86,16 @@
   width: calc(#{$percent} - #{$gutter});
   width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));
 
+  // fallback for IE11 gutter (grid-gap doesn't work in IE11)
+  margin: 0 $gutter / 2;
+  margin: 0 calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);
+
   @supports (display: grid) {
     width: auto;
     grid-column-end: span min($span, map-get($mdc-layout-grid-columns, $size));
+
+    // fallback for IE11 gutter (grid-gap doesn't work in IE11)
+    margin: 0;
   }
 }
 
@@ -140,12 +147,6 @@
   @include mdc-layout-grid-cell-span_($size, $default-span, $gutter);
 
   box-sizing: border-box;
-  margin: $gutter / 2;
-  margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);
-
-  @supports (display: grid) {
-    margin: 0;
-  }
 }
 
 @mixin mdc-layout-grid-cell-order($order) {