diff --git a/scss/_card.scss b/scss/_card.scss index 9385859262..f68855c56c 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -175,18 +175,6 @@ } } -$row-columns: 6 !default; - -@each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - @for $i from 1 through $row-columns { - .row-cols#{$infix}-#{$i} > [class^="col"] { - flex: 0 0 calc(100% / #{$i}); - } - } -} - // // Card groups diff --git a/scss/_grid.scss b/scss/_grid.scss index d36ee75d88..5f25e38f18 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -46,6 +46,16 @@ @include make-row(); } + @each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + } + // Remove the negative margin from default .row, then the horizontal padding // from all immediate children columns (to prevent runaway style inheritance). .no-gutters { diff --git a/scss/_variables.scss b/scss/_variables.scss index 850344aac0..e5b1a797df 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -215,6 +215,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; +$grid-row-columns: 6 !default; // Container padding diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index b85e31bc08..f0b6c52700 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -49,3 +49,14 @@ $num: $size / $columns; margin-left: if($num == 0, 0, percentage($num)); } + +// Row columns +// +// Specify on a parent element(e.g., .row) to force immediate children into NN +// numberof columns. Supports wrapping to new lines, but does not do a Masonry +// style grid. +@mixin row-cols($count) { + & > [class^="col"] { + flex: 0 0 calc(100% / #{$count}); + } +} diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 372f68e738..2d839968ff 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -369,6 +369,20 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} +You can also use the accompanying Sass mixin, `row-cols()`: + +{{< highlight scss >}} +.element { + // Three columns to start + @include row-cols(3); + + // Five columns from medium breakpoint up + @include media-breakpoint-up(md) { + @include row-cols(5); + } +} +{{< /highlight >}} + ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)