Add equal column mixin (#32155)

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 92bb88ad49447c913b872e4ae95a161592f84b26..d757eac7404ae08d6f4c38254b2d6cc93b9a0004 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -26,9 +26,14 @@
   margin-top: var(--#{$variable-prefix}gutter-y);
 }
 
-@mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 auto;
-  width: percentage($size / $columns);
+@mixin make-col($size: false, $columns: $grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    width: percentage($size / $columns);
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
 }
 
 @mixin make-col-auto() {

diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md
index 76b65c1bc6b875387634219e3e3defd7c745aff9..ddc1c594df01686eb162938fbf69f0554ef0702e 100644 (file)
--- a/site/content/docs/5.0/layout/grid.md
+++ b/site/content/docs/5.0/layout/grid.md
@@ -434,6 +434,9 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 // Make the element grid-ready (applying everything but the width)
 @include make-col-ready();
+
+// Without optional size values, the mixin will create equal columns (similar to using .col)
+@include make-col();
 @include make-col($size, $columns: $grid-columns);
 
 // Get fancy by offsetting, or changing the sort order