diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 88cbd249a0..402a99e928 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -2,14 +2,20 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width-base) { +@mixin make-container($gutters: $grid-gutter-widths) { margin-left: auto; margin-right: auto; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); @if not $enable-flex { @include clearfix(); } + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } }