From ae2029867c99ad5117f74739375ed292afa7a289 Mon Sep 17 00:00:00 2001
From: Celeste Glavin <celeste.glavin@wework.com>
Date: Tue, 12 Mar 2019 14:41:51 -0400
Subject: [PATCH] fix(grid): fix gutter for all browsers (#21)

* fix(grid): fix gutter for all browsers

* deploy

* fix(mixin): change the span mixin
---
 packages/core/src/global/material-grid/_mixins.scss | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/global/material-grid/_mixins.scss b/packages/core/src/global/material-grid/_mixins.scss
index 780dc795..4d46cabf 100644
--- a/packages/core/src/global/material-grid/_mixins.scss
+++ b/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) {