Merge pull request #17362 from omeid/v4-container-mixin

Semantic grid: add make-container-breakpoint

2 files changed, 11 insertions, 6 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index b71d5b03d..1841b7faa 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -4,13 +4,8 @@
 
 .container {
   @include make-container();
+  @include make-container-max-widths();
 
-  // For each breakpoint, define the maximum width of the container in a media query
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    @include media-breakpoint-up($breakpoint) {
-      max-width: $container-max-width;
-    }
-  }
 }
 
 
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 56b8c6f20..87b4ac94a 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -10,6 +10,16 @@
   @include clearfix();
 }
 
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
 @mixin make-row($gutter: $grid-gutter-width) {
   @if $enable-flex {
     display: flex;