Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Drop .grid where it shouldn't be used #40790

Merged
merged 6 commits into from
Oct 9, 2024
Merged

Docs: Drop .grid where it shouldn't be used #40790

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
43232ea
Drop `.grid` where we shouldn't use it
louismaximepiton Sep 3, 2024
423e252
fix(review)
louismaximepiton Sep 5, 2024
befe19f
Merge remote-tracking branch 'origin/main' into main-lmp-docs-grid-gap
louismaximepiton Oct 9, 2024
d8246ef
Wording fix
louismaximepiton Oct 9, 2024
c489d16
Merge branch 'main' into main-lmp-docs-grid-gap
julien-deramond Oct 9, 2024
5b037e1
Revert modifications in Layout > CSS Grid
julien-deramond Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions site/content/docs/5.3/layout/css-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,13 +227,23 @@ 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.
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" >}}).
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved

{{< example class="bd-example-cssgrid" >}}
<div class="grid text-center" style="row-gap: 0;">
<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 >}}

Change the vertical gaps only by modifying the `row-gap`, here by using CSS properties.

{{< 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>
Expand Down
30 changes: 15 additions & 15 deletions site/content/docs/5.3/utilities/spacing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 >}}

Expand All @@ -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 >}}

Expand All @@ -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 >}}

Expand Down
Loading