Issue #3211889 by mherchel, Gauravmahlawat: Autoprefixer and PostCSS calc not...

Issue #3211889 by mherchel, Gauravmahlawat: Autoprefixer and PostCSS calc not generating proper IE11 grid syntax when repeat() function contains calc()

(cherry picked from commit 51a82dbf)

core/themes/olivero/css/layout/grid.css

@@ -45,7 +45,7 @@
 
 .layout--content-narrow .grid-full,
 .layout--pass--content-narrow > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))12];
+    -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
     grid-template-columns: repeat(12, minmax(0, 1fr))
 }
   }
@@ -54,7 +54,7 @@
 
 .layout--content-narrow .grid-full,
 .layout--pass--content-narrow > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))8];
+    -ms-grid-columns: (minmax(0, 1fr))[ 8 ];
     grid-template-columns: repeat(8, minmax(0, 1fr))
 }
   }
@@ -69,7 +69,7 @@
 
 .layout--content-medium .grid-full,
 .layout--pass--content-medium > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))12];
+    -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
     grid-template-columns: repeat(12, minmax(0, 1fr))
 }
   }
@@ -78,7 +78,7 @@
 
 .layout--content-medium .grid-full,
 .layout--pass--content-medium > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))10];
+    -ms-grid-columns: (minmax(0, 1fr))[ 10 ];
     grid-template-columns: repeat(10, minmax(0, 1fr))
 }
   }

core/themes/olivero/css/layout/grid.pcss.css

@@ -30,10 +30,12 @@
 .layout--content-narrow .grid-full,
 .layout--pass--content-narrow > * .grid-full {
   @media (--grid-md) {
+    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
     grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
   }
 
   @media (--lg) {
+    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--lg) - 6) ];
     grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr));
   }
 }
@@ -46,10 +48,12 @@
 .layout--content-medium .grid-full,
 .layout--pass--content-medium > * .grid-full {
   @media (--grid-md) {
+    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
     grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
   }
 
   @media (--lg) {
+    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 4) ];
     grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr));
   }
 }