Add equal column mixin (#32155)

twbs · Apr 6, 2021 · 0c56749 · 0c56749
1 parent 317c2cd
commit 0c56749
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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