Allow percentages in container widths (#29819)

1 files changed, 9 insertions, 1 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index d36ee75d88..57ec5a9d0b 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -25,11 +25,19 @@
         max-width: $container-max-width;
       }
 
+      // Extend each breakpoint which is smaller or equal to the current breakpoint
+      $extend-breakpoint: true;
+
       @each $name, $width in $grid-breakpoints {
-        @if ($container-max-width > $width or $breakpoint == $name) {
+        @if ($extend-breakpoint) {
           .container#{breakpoint-infix($name, $grid-breakpoints)} {
             @extend %responsive-container-#{$breakpoint};
           }
+
+          // Once the current breakpoint is reached, stop extending
+          @if ($breakpoint == $name) {
+            $extend-breakpoint: false;
+          }
         }
       }
     }