Configurable container padding (#28554)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8255d107ae1a9bab2b2bb424b0331525f49877eb..9d83f8c61519c9febd60a19931e03c4c7d0741b9 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -222,6 +222,11 @@ $grid-columns:                12 !default;
 $grid-gutter-width:           30px !default;
 
 
+// Container padding
+
+$container-padding-x: $grid-gutter-width / 2 !default;
+
+
 // Components
 //
 // Define common padding and border radius sizes and more.

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 924eb0cfc0f88cb70b7ea1aab134678b48bae06c..b85e31bc081e3254334f2a6113bc0847d5319202 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -2,10 +2,10 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutter: $grid-gutter-width) {
+@mixin make-container($padding-x: $container-padding-x) {
   width: 100%;
-  padding-right: $gutter / 2;
-  padding-left: $gutter / 2;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
   margin-right: auto;
   margin-left: auto;
 }