Fixed grid issue in IE11

Co-Authored-By: Claudia Romano <claudia-romano@users.noreply.github.com>

main/assets/css/base/_grid-layout.scss

@@ -74,23 +74,24 @@
 $grid-columns: 12 !default;
 
 .grid {
+  --gap: 0px;
   display: flex;
   flex-wrap: wrap;
 
   > * {
     flex-basis: 100%;
+    max-width: 100%;
   }
 }
 
 [class*="gap-xxxxs"], [class*="gap-xxxs"], [class*="gap-xxs"], [class*="gap-xs"], [class*="gap-sm"], [class*="gap-md"], [class*="gap-lg"], [class*="gap-xl"], [class*="gap-xxl"], [class*="gap-xxxl"], [class*="gap-xxxxl"], [class*="grid-gap-"], [class*="flex-gap-"] {
-  --gap: 0.75em;
-  --offset: var(--gap);
-  margin-bottom: calc(-1 * var(--gap));
-  margin-left: calc(-1 * var(--gap));
+  --offset: var(--gap, 0.75em);
+  margin-bottom: calc(-1 * var(--gap, 0.75em));
+  margin-left: calc(-1 * var(--gap, 0.75em));
 
   > * {
-    margin-bottom: var(--gap);
-    margin-left: var(--offset);
+    margin-bottom: var(--gap, 0.75em);
+    margin-left: var(--offset, 0.75em);
   }
 }
 
@@ -126,14 +127,14 @@ $grid-columns: 12 !default;
 
 @for $i from 1 through $grid-columns {
   .col-#{$i} {
-    flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
-    max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
+    flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
+    max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
   }
 }
 
 @for $i from 1 through $grid-columns - 1 {
   .offset-#{$i} {
-    --offset: calc(#{round-width($i)} + var(--gap, 0px));
+    --offset: calc(#{round-width($i)} + var(--gap, 0.75em));
   }
 }
 
@@ -144,14 +145,14 @@ $grid-columns: 12 !default;
 
   @for $i from 1 through $grid-columns {
     .col-#{$i}\@xs {
-      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
-      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
+      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
+      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
     }
   }
 
   @for $i from 1 through $grid-columns - 1 {
     .offset-#{$i}\@xs {
-      --offset: calc(#{round-width($i)} + var(--gap, 0px));
+      --offset: calc(#{round-width($i)} + var(--gap, 0.75em));
     }
   }
 
@@ -177,14 +178,14 @@ $grid-columns: 12 !default;
 
   @for $i from 1 through $grid-columns {
     .col-#{$i}\@sm  {
-      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
-      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
+      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
+      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
     }
   }
 
   @for $i from 1 through $grid-columns - 1 {
     .offset-#{$i}\@sm {
-      --offset: calc(#{round-width($i)} + var(--gap, 0px));
+      --offset: calc(#{round-width($i)} + var(--gap, 0.75em));
     }
   }
 
@@ -210,14 +211,14 @@ $grid-columns: 12 !default;
 
   @for $i from 1 through $grid-columns {
     .col-#{$i}\@md {
-      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
-      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
+      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
+      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
     }
   }
 
   @for $i from 1 through $grid-columns - 1 {
     .offset-#{$i}\@md {
-      --offset: calc(#{round-width($i)} + var(--gap, 0px));
+      --offset: calc(#{round-width($i)} + var(--gap, 0.75em));
     }
   }
 
@@ -243,14 +244,14 @@ $grid-columns: 12 !default;
 
   @for $i from 1 through $grid-columns {
     .col-#{$i}\@lg {
-      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
-      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
+      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
+      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
     }
   }
 
   @for $i from 1 through $grid-columns - 1 {
     .offset-#{$i}\@lg {
-      --offset: calc(#{round-width($i)} + var(--gap, 0px));
+      --offset: calc(#{round-width($i)} + var(--gap, 0.75em));
     }
   }
 
@@ -276,14 +277,14 @@ $grid-columns: 12 !default;
 
   @for $i from 1 through $grid-columns {
     .col-#{$i}\@xl {
-      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
-      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0px));
+      flex-basis: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
+      max-width: calc( #{round-width($i)} - 0.01px - var(--gap, 0.75em));
     }
   }
 
   @for $i from 1 through $grid-columns - 1 {
     .offset-#{$i}\@xl {
-      --offset: calc(#{round-width($i)} + var(--gap, 0px));
+      --offset: calc(#{round-width($i)} + var(--gap, 0.75em));
     }
   }