Merge branch 'v4-dev' into v4-dev-martijncuppens-remove-redundant-bra…

…ckets

scss/mixins/_grid.scss

@@ -2,10 +2,10 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container() {
+@mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: $grid-gutter-width / 2;
-  padding-left: $grid-gutter-width / 2;
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
   margin-right: auto;
   margin-left: auto;
 }
@@ -20,21 +20,21 @@
   }
 }
 
-@mixin make-row() {
+@mixin make-row($gutter: $grid-gutter-width) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -$grid-gutter-width / 2;
-  margin-left: -$grid-gutter-width / 2;
+  margin-right: -$gutter / 2;
+  margin-left: -$gutter / 2;
 }
 
-@mixin make-col-ready() {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
   position: relative;
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: $grid-gutter-width / 2;
-  padding-left: $grid-gutter-width / 2;
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
 }
 
 @mixin make-col($size, $columns: $grid-columns) {