mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
Drop .grid
where we shouldn't use it
This commit is contained in:
parent
e1b48d253c
commit
43232ea4ab
@ -227,13 +227,21 @@ Adding more rows and changing the placement of columns:
|
||||
|
||||
### Gaps
|
||||
|
||||
Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed.
|
||||
Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed using either CSS properties, or CSS variables, or our [gap utilities]({{< docsref "/utilities/spacing#gap" >}}).
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid text-center gap-3">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid text-center" style="row-gap: 0;">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
</div>
|
||||
|
@ -103,11 +103,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
|
||||
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 class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
|
||||
<div class="p-2">Grid item 1</div>
|
||||
<div class="p-2">Grid item 2</div>
|
||||
<div class="p-2">Grid item 3</div>
|
||||
<div class="p-2">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -118,11 +118,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
|
||||
`row-gap` sets the vertical space between children items in the specified container.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-0 row-gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
|
||||
<div class="p-2">Grid item 1</div>
|
||||
<div class="p-2">Grid item 2</div>
|
||||
<div class="p-2">Grid item 3</div>
|
||||
<div class="p-2">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -131,11 +131,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
|
||||
`column-gap` sets the horizontal space between children items in the specified container.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-0 column-gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
|
||||
<div class="p-2">Grid item 1</div>
|
||||
<div class="p-2">Grid item 2</div>
|
||||
<div class="p-2">Grid item 3</div>
|
||||
<div class="p-2">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user