Update grid build to include grid utilities (#42172)

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

Author: mdo

scss/_config.scss

@@ -30,15 +30,18 @@ $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,
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
 ) !default;
+
+$negative-spacers: (
+  "-1": $spacer * -.25,
+  "-2": $spacer * -.5,
+) !default;
 // scss-docs-end spacer-variables-maps
 
 $sizes: (

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,

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",