diff --git a/scss/_card.scss b/scss/_card.scss index 93858592624b690341ca522ebdf9640a9f644615..f68855c56ccdaa76be37958455993edf1fbb9c38 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 d36ee75d8874456f09700922ab5b6b2ceecdf44c..5f25e38f184be53c438d48289c399e93ff20d1ab 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 850344aac0943cf7bf872f840fd7f6672a140162..e5b1a797dff2fa28c83254a038b95dd9ff5547fd 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 b85e31bc081e3254334f2a6113bc0847d5319202..f0b6c5270031a63d50b055769c939fd7d3f84a00 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 372f68e738f5869b888877d967b8b43f9ea90ba0..2d839968ffeaf7e3c9a3ce0051a62a838029b67f 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 >}} </div> +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)