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

Jump to bottom

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 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
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" >}}).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels weird to start this section by "Note that [...]". It's like there's a missing explanation. Maybe you could rather have something like:

  1. Change the gaps only by using our gap utilities + example
  2. Change the vertical gaps only by modifying the row-gap. Note that we use gapon.grids, but row-gapandcolumn-gap can be modified as needed. + example
  3. Because of that, you can have different vertical and horizontal gaps, [...] + example

What do you think?


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