Grid Gap Updates (#37413)

* Grid Gap Updates

- added column-gap
- added row-gap

* Grid Gap Updates

* Bundlewatch update

* Apply suggestions from code review

Co-authored-by: Daniel O <[email protected]>
Co-authored-by: Mark Otto <[email protected]>
Co-authored-by: Mark Otto <[email protected]>

3 files changed, 50 insertions, 11 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index c52cee287..0c2c16280 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -18,19 +18,19 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "9.25 kB"
+      "maxSize": "9.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "8.5 kB"
+      "maxSize": "9.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "29.75 kB"
+      "maxSize": "30.25 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "27.75 kB"
+      "maxSize": "28 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index d69f89a98..a8c8b89a7 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -472,6 +472,18 @@ $utilities: map-merge(
       class: gap,
       values: $spacers
     ),
+    "row-gap": (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $spacers
+    ),
+    "column-gap": (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $spacers
+    ),
     // scss-docs-end utils-spacing
     // Text
     // scss-docs-start utils-text
diff --git a/site/content/docs/5.2/utilities/spacing.md b/site/content/docs/5.2/utilities/spacing.md
index 1e5f6d32f..c8425d4a9 100644
--- a/site/content/docs/5.2/utilities/spacing.md
+++ b/site/content/docs/5.2/utilities/spacing.md
@@ -100,18 +100,45 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 
 ## Gap
 
-When using `display: grid`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `display: grid` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
-
-{{< example html >}}
-<div class="d-grid gap-3">
-  <div class="p-2 bg-light border">Grid item 1</div>
-  <div class="p-2 bg-light border">Grid item 2</div>
-  <div class="p-2 bg-light border">Grid item 3</div>
+When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
+
+{{< example >}}
+<div class="grid gap-3" >
+  <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 4</div>
 </div>
 {{< /example >}}
 
 Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
 
+### row-gap
+
+`row-gap` sets the vertical space between children items in the specified container.
+
+{{< example >}}
+<div class="grid gap-0 row-gap-3" >
+  <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+### column-gap
+
+`column-gap` sets the horizontal space between children items in the specified container.
+
+{{< example >}}
+<div class="grid gap-0 column-gap-3" >
+  <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
 ## Sass
 
 ### Maps