Update grid build to include grid utilities (#42172)

Also fixes negative margin/gap values by separating negative spacers and doing a multi-map merge

diff --git a/scss/_config.scss b/scss/_config.scss
index 9530d434338ae1958e4518ff1c999aabb104b398..6ee1673dce1699227120b8cc0e1597e032f29b26 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -30,8 +30,6 @@ $min-contrast-ratio:         4.5 !default;
 // scss-docs-start spacer-variables-maps
 $spacer: 1rem !default;
 $spacers: (
-  -2: $spacer * -.5,
-  -1: $spacer * -.25,
   0: 0,
   1: $spacer * .25,
   2: $spacer * .5,
@@ -39,6 +37,11 @@ $spacers: (
   4: $spacer * 1.5,
   5: $spacer * 3,
 ) !default;
+
+$negative-spacers: (
+  "-1": $spacer * -.25,
+  "-2": $spacer * -.5,
+) !default;
 // scss-docs-end spacer-variables-maps
 
 $sizes: (

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c1687682a75afbb4e80e3f9d2cb82be691a80080..1eb04558a731f6fcc363a600b4e6f466ce77f8cb 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -507,51 +507,8 @@ $utilities: map.merge(
       responsive: true,
       property: margin-inline-start,
       class: ms,
-      values: map.merge($spacers, (auto: auto))
+      values: map-merge-multiple($spacers, $negative-spacers, (auto: auto))
     ),
-    // Negative margin utilities
-    // "negative-margin": (
-    //   responsive: true,
-    //   property: margin,
-    //   class: m,
-    //   values: $negative-spacers
-    // ),
-    // "negative-margin-x": (
-    //   responsive: true,
-    //   property: margin-inline,
-    //   class: mx,
-    //   values: $negative-spacers
-    // ),
-    // "negative-margin-y": (
-    //   responsive: true,
-    //   property: margin-block,
-    //   class: my,
-    //   values: $negative-spacers
-    // ),
-    // "negative-margin-top": (
-    //   responsive: true,
-    //   property: margin-block-start,
-    //   class: mt,
-    //   values: $negative-spacers
-    // ),
-    // "negative-margin-end": (
-    //   responsive: true,
-    //   property: margin-inline-end,
-    //   class: me,
-    //   values: $negative-spacers
-    // ),
-    // "negative-margin-bottom": (
-    //   responsive: true,
-    //   property: margin-block-end,
-    //   class: mb,
-    //   values: $negative-spacers
-    // ),
-    // "negative-margin-start": (
-    //   responsive: true,
-    //   property: margin-inline-start,
-    //   class: ms,
-    //   values: $negative-spacers
-    // ),
     // Padding utilities
     "padding": (
       responsive: true,

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index cb71b88127273e133fb4c5cbffd63b4bb7ff0753..7dff9bf721205729988cda0f6e5d9668d5c01420 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -17,6 +17,12 @@ $utilities: map-get-multiple(
   (
     "display",
     "order",
+    "grid-column-counts",
+    "grid-columns",
+    "grid-auto-flow",
+    "gap",
+    "row-gap",
+    "column-gap",
     "flex",
     "flex-direction",
     "flex-grow",