From 43232ea4aba69ff1aa5946ef6340d902ca526157 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 3 Sep 2024 12:16:08 +0200 Subject: [PATCH 1/4] Drop `.grid` where we shouldn't use it --- site/content/docs/5.3/layout/css-grid.md | 12 +++++++-- site/content/docs/5.3/utilities/spacing.md | 30 +++++++++++----------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/site/content/docs/5.3/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md index c79c4ce0f406..99b85edc47d7 100644 --- a/site/content/docs/5.3/layout/css-grid.md +++ b/site/content/docs/5.3/layout/css-grid.md @@ -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" >}} -
+
+
.g-col-6
+
.g-col-6
.g-col-6
.g-col-6
+
+{{< /example >}} +{{< example class="bd-example-cssgrid" >}} +
+
.g-col-6
+
.g-col-6
.g-col-6
.g-col-6
diff --git a/site/content/docs/5.3/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md index 2562b8d43e4a..3aa9a8e33867 100644 --- a/site/content/docs/5.3/utilities/spacing.md +++ b/site/content/docs/5.3/utilities/spacing.md @@ -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" >}} -
-
Grid item 1
-
Grid item 2
-
Grid item 3
-
Grid item 4
+
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /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" >}} -
-
Grid item 1
-
Grid item 2
-
Grid item 3
-
Grid item 4
+
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /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" >}} -
-
Grid item 1
-
Grid item 2
-
Grid item 3
-
Grid item 4
+
+
Grid item 1
+
Grid item 2
+
Grid item 3
+
Grid item 4
{{< /example >}} From 423e252a1c57edb571b945faf6c9addd5671adc1 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 5 Sep 2024 08:47:15 +0200 Subject: [PATCH 2/4] fix(review) --- site/content/docs/5.3/layout/css-grid.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.3/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md index 99b85edc47d7..3a3128436ffd 100644 --- a/site/content/docs/5.3/layout/css-grid.md +++ b/site/content/docs/5.3/layout/css-grid.md @@ -227,7 +227,7 @@ 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 using either CSS properties, or CSS variables, or our [gap utilities]({{< docsref "/utilities/spacing#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" >}}
@@ -238,6 +238,8 @@ Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap`
{{< /example >}} +Change the vertical gaps only by modifying the `row-gap`, here by using CSS properties. + {{< example class="bd-example-cssgrid" >}}
.g-col-6
From d8246ef8fd02c43d99c040e4df2907e91c2f379b Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 9 Oct 2024 08:33:24 +0200 Subject: [PATCH 3/4] Wording fix --- site/content/docs/5.3/layout/css-grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.3/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md index 3a3128436ffd..9039ba1a7288 100644 --- a/site/content/docs/5.3/layout/css-grid.md +++ b/site/content/docs/5.3/layout/css-grid.md @@ -227,7 +227,7 @@ Adding more rows and changing the placement of columns: ### Gaps -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" >}}). +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" >}}
@@ -238,7 +238,7 @@ Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modifi
{{< /example >}} -Change the vertical gaps only by modifying the `row-gap`, here by using CSS properties. +Change the vertical gaps only by modifying the `row-gap` (resp. `gap` or `column-gap`), here by using CSS properties. {{< example class="bd-example-cssgrid" >}}
From 5b037e1cbfbdc3e6dfb1abaa798863a466b4634e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 9 Oct 2024 17:39:05 +0200 Subject: [PATCH 4/4] Revert modifications in Layout > CSS Grid --- site/content/docs/5.3/layout/css-grid.md | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/site/content/docs/5.3/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md index 9039ba1a7288..c79c4ce0f406 100644 --- a/site/content/docs/5.3/layout/css-grid.md +++ b/site/content/docs/5.3/layout/css-grid.md @@ -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" >}} -
-
.g-col-6
-
.g-col-6
-
.g-col-6
-
.g-col-6
-
-{{< /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" >}}
.g-col-6
.g-col-6
+
.g-col-6
.g-col-6