Add equal column mixin (#32155)

2 files changed, 11 insertions, 3 deletions

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 92bb88ad4..d757eac74 100644
--- 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 76b65c1bc..ddc1c594d 100644
--- 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