mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 11:21:23 +02:00
Code Issues Releases Wiki Activity

Grid Gap Updates (#37413)

Browse Source 
* Grid Gap Updates

- added column-gap
- added row-gap

* Grid Gap Updates

* Bundlewatch update

* Apply suggestions from code review

Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Daniel Raymond
2022-11-16 03:51:44 +01:00
committed by GitHub
parent 46a7035ab2
commit 5f67d38bb2
3 changed files with 49 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
site/content/docs/5.2/utilities/spacing.md
View File

@@ -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.
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 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>
{{< 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