Switch to custom properties to control grid gutter widths (#30475)

3 files changed, 24 insertions, 38 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index e4e3c9796..5686f31fe 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,40 +12,6 @@
   }
 }
 
-// Gutters
-//
-// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-
-@if $enable-grid-classes {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-
-      @each $key, $value in $gutters {
-        .g#{$infix}-#{$key},
-        .gx#{$infix}-#{$key} {
-          margin-right: -$value / 2;
-          margin-left: -$value / 2;
-
-          > * {
-            padding-right: $value / 2;
-            padding-left: $value / 2;
-          }
-        }
-
-        .g#{$infix}-#{$key},
-        .gy#{$infix}-#{$key} {
-          margin-top: -$value;
-
-          > * {
-            margin-top: $value;
-          }
-        }
-      }
-    }
-  }
-}
 
 // Columns
 //
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 35283207d..aba7dcb58 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -3,10 +3,13 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-row($gutter: $grid-gutter-width) {
+  --grid-gutter-x: #{$gutter};
+  --grid-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-right: -$gutter / 2;
-  margin-left: -$gutter / 2;
+  margin-top: calc(var(--grid-gutter-y) * -1); // stylelint-disable-line function-blacklist
+  margin-right: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
+  margin-left: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -18,8 +21,9 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: $gutter / 2;
-  padding-left: $gutter / 2;
+  padding-right: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
+  padding-left: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
+  margin-top: var(--grid-gutter-y);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
@@ -93,6 +97,21 @@
           }
         }
       }
+
+      // Gutters
+      //
+      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+      @each $key, $value in $gutters {
+        .g#{$infix}-#{$key},
+        .gx#{$infix}-#{$key} {
+          --grid-gutter-x: #{$value};
+        }
+
+        .g#{$infix}-#{$key},
+        .gy#{$infix}-#{$key} {
+          --grid-gutter-y: #{$value};
+        }
+      }
     }
   }
 }
diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 834386a48..c4089e05f 100644
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -45,6 +45,7 @@ Breaking it down, here's how it works:
 - The horizontal gutter width can be changed with `.gx-*` classes like `.gx-2` (smaller horizontal gutters) or `.gx-xl-4` (larger horizontal gutters on viewports larger than the `xl` breakpoint).
 - The vertical gutter width can be changed with `.gy-*` classes like `.gy-2` (smaller vertical gutters) or `.gy-xl-4` (larger vertical gutters on viewports larger than the `xl` breakpoint). To achieve vertical gutters, additional margin is added to the top of each column. The `.row` counteracts this margin to the top with a negative margin.
 - The gutter width in both directions can be changed with `.g-*` classes like `.g-2` (smaller gutters) or `.g-xl-4` (larger gutters on viewports larger than the `xl` breakpoint)
+- CSS custom properties (`--grid-gutter-x` and `--grid-gutter-y`) are used to calculate the gutter widths.
 
 Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).