From 5f67d38bb2f30f833519f205353ff6ba839fb40f Mon Sep 17 00:00:00 2001 From: Daniel Raymond <29353783+MadeByRaymond@users.noreply.github.com> Date: Wed, 16 Nov 2022 03:51:44 +0100 Subject: 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 Co-authored-by: Mark Otto Co-authored-by: Mark Otto --- site/content/docs/5.2/utilities/spacing.md | 41 +++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 7 deletions(-) (limited to 'site/content/docs') 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 >}} -
-
Grid item 1
-
Grid item 2
-
Grid item 3
+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 >}} +
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /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 >}} +
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
+
+{{< /example >}} + +### column-gap + +`column-gap` sets the horizontal space between children items in the specified container. + +{{< example >}} +
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
+
+{{< /example >}} + ## Sass ### Maps -- cgit v1.2.3