diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8255d107ae..9d83f8c615 100644
--- 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 924eb0cfc0..b85e31bc08 100644
--- 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;
 }