diff options
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.2/utilities/spacing.md | 41 |
1 files changed, 34 insertions, 7 deletions
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 |