diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 92bb88ad4944..d757eac7404a 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 76b65c1bc6b8..ddc1c594df01 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