Skip to content

Commit

Permalink
Revert modifications in Layout > CSS Grid
Browse files Browse the repository at this point in the history
  • Loading branch information
julien-deramond committed Oct 9, 2024
1 parent c489d16 commit 5b037e1
Showing 1 changed file with 2 additions and 12 deletions.
14 changes: 2 additions & 12 deletions site/content/docs/5.3/layout/css-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -227,23 +227,13 @@ Adding more rows and changing the placement of columns:

### Gaps

Change the gaps only by modifying the `gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed using 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 >}}

Change the vertical gaps only by modifying the `row-gap` (resp. `gap` or `column-gap`), here by using CSS properties.
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.

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

0 comments on commit 5b037e1

Please sign in to comment.