Add param to grid mixins for y gutter (#42130)

Co-authored-by: Florian Lacreuse <florianlacreuse@users.noreply.github.com>

diff --git a/scss/_card.scss b/scss/_card.scss
index 1548d13a5bca152895a4b6d10d37eaa591bfae00..3be9b885ffc0aaf31d7f66fd6d935bf851250c94 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -28,7 +28,7 @@ $card-tokens: defaults(
     --card-color: inherit,
     --card-bg: var(--bg-body),
     --card-img-overlay-padding: #{$spacer},
-    --card-group-margin: #{$grid-gutter-width * .5},
+    --card-group-margin: #{$grid-gutter-x * .5},
     --card-body-gap: #{$spacer * .5},
   ),
   $card-tokens

diff --git a/scss/_config.scss b/scss/_config.scss
index 626d3089c15bf2048bb373d5b9eb6313f2af3b72..9530d434338ae1958e4518ff1c999aabb104b398 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -80,7 +80,8 @@ $breakpoints: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
+$grid-gutter-x: 1.5rem !default;
+$grid-gutter-y: 0 !default;
 $grid-row-columns: 6 !default;
 
 $gutters: $spacers !default;
@@ -99,7 +100,7 @@ $container-max-widths: (
 ) !default;
 // scss-docs-end container-max-widths
 
-$container-padding-x: $grid-gutter-width !default;
+$container-padding-x: $grid-gutter-x !default;
 
 $utilities: () !default;
 

diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index c15ba84e4d0e66a4ba6bc8d045dce5b80bf8289a..dab87eb7d386d776cb87faa16b07e53ecc07d352 100644 (file)
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -21,7 +21,7 @@
     .grid {
       --columns: #{$grid-columns};
       --rows: 1;
-      --gap: #{$grid-gutter-width};
+      --gap: #{$grid-gutter-x};
 
       display: grid;
       grid-template-rows: repeat(var(--rows), 1fr);
@@ -39,7 +39,7 @@
   }
 
   .grid-fill {
-    --gap: #{$grid-gutter-width};
+    --gap: #{$grid-gutter-x};
 
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index e6c5a82a4e138bdd2856e1d84db881733bd4c77d..632369b1e1a97857c1bcf7ee52da82277e5ade05 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -8,9 +8,9 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-row($gutter: $grid-gutter-width) {
-  --gutter-x: #{$gutter};
-  --gutter-y: 0;
+@mixin make-row($gutter-x: $grid-gutter-x, $gutter-y: $grid-gutter-y) {
+  --gutter-x: #{$gutter-x};
+  --gutter-y: #{$gutter-y};
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
@@ -71,7 +71,7 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $breakpoints) {
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-x, $breakpoints: $breakpoints) {
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

diff --git a/site/src/content/docs/layout/css-grid.mdx b/site/src/content/docs/layout/css-grid.mdx
index e0134b21bce1753fe62c67e7c8be53fea25a3a12..9894acd488a32975c0147d034847f11bf0f5b0e5 100644 (file)
--- a/site/src/content/docs/layout/css-grid.mdx
+++ b/site/src/content/docs/layout/css-grid.mdx
@@ -230,7 +230,7 @@ Because of that, you can have different vertical and horizontal `gap`s, which ca
 
 ## Sass
 
-One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, `$grid-columns` and `$grid-gutter-width`. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:
+One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, `$grid-columns` and `$grid-gutter-x`. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:
 
 - Modify those default Sass variables and recompile your CSS.
 - Use inline or custom styles to augment the provided classes.

diff --git a/site/src/content/docs/layout/grid.mdx b/site/src/content/docs/layout/grid.mdx
index 99fb2ee11fb60cea5ed6f0f0db6fde15187c725b..93968c9c73796a232bea59d7bd48dd097b758fd6 100644 (file)
--- a/site/src/content/docs/layout/grid.mdx
+++ b/site/src/content/docs/layout/grid.mdx
@@ -370,12 +370,13 @@ When using Bootstrap’s source Sass files, you have the option of using Sass va
 
 ### Sass variables
 
-Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
+Variables and maps determine the number of columns, the horizontal and vertical gutter size, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
 
 ```scss
-$grid-columns:      12;
-$grid-gutter-width: 1.5rem;
-$grid-row-columns:  6;
+$grid-columns:    12;
+$grid-gutter-x:   1.5rem;
+$grid-gutter-y:   0;
+$grid-row-columns: 6;
 ```
 
 <ScssDocs name="breakpoints" file="scss/_config.scss" />
@@ -388,7 +389,10 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 ```scss
 // Creates a wrapper for a series of columns
-@include make-row();
+@include make-row(); // default values for both horizontal and vertical gutters
+@include make-row(2rem); // 2rem for horizontal gutters and default value for vertical gutters
+@include make-row(2rem, 1rem); // 2rem for horizontal gutters and 1rem for vertical gutters
+@include make-row($gutter-y: 1rem); // default value for horizontal gutters and 1rem for vertical gutters
 
 // Make the element grid-ready (applying everything but the width)
 @include make-col-ready();
@@ -453,11 +457,12 @@ Using our built-in grid Sass variables and maps, it’s possible to completely c
 
 ### Columns and gutters
 
-The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters. `$grid-row-columns` is used to set the maximum number of columns of `.row-cols-*`, any number over this limit is ignored.
+The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column. `$grid-gutter-x` and `$grid-gutter-y` set the horizontal and vertical gutter sizes. `$grid-row-columns` is used to set the maximum number of columns of `.row-cols-*`, any number over this limit is ignored.
 
 ```scss
 $grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
+$grid-gutter-x: 1.5rem !default;
+$grid-gutter-y: 0 !default;
 $grid-row-columns: 6 !default;
 ```
 

diff --git a/site/src/content/docs/layout/gutters.mdx b/site/src/content/docs/layout/gutters.mdx
index bda62c81656a9bb6a4e6dd385c3f1adb0a6f87d8..699e5d35de538a1f72d946c6902cefd7d7cc9aa4 100644 (file)
--- a/site/src/content/docs/layout/gutters.mdx
+++ b/site/src/content/docs/layout/gutters.mdx
@@ -139,7 +139,7 @@ In practice, here’s how it looks. Note that you can continue to use this with
 Classes are built from the `$gutters` Sass map which is inherited from the `$spacers` Sass map.
 
 ```scss
-$grid-gutter-width: 1.5rem;
+$grid-gutter-x: 1.5rem;
 $gutters: (
   0: 0,
   1: $spacer * .25,

diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index 78415cc2813e4d731ece5ed5119b36b1d0e20f34..33b247835c2d8baa5a9aa0af2e3e4a421510ad23 100644 (file)
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -13,7 +13,7 @@
       display: grid;
       grid-template-areas: "sidebar main";
       grid-template-columns: 1fr 5fr;
-      gap: $grid-gutter-width;
+      gap: $grid-gutter-x;
     }
 
     @include media-breakpoint-up(xl) {