diff --git a/scss/_card.scss b/scss/_card.scss index 5cca2ae283c6d14d0d452c6e21c2500921176671..fdbe95f404d6c5d5b47dd4dc6a95fa9f384eea73 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -168,18 +168,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 66875948de18817f25490ac04209e41012c30fcf..3a1917ada4c61a507b1f6a280dc300c452cca6f8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -227,6 +227,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; +$grid-row-columns: 6 !default; // Components diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 924eb0cfc0f88cb70b7ea1aab134678b48bae06c..8672e7c16375fdfdeaacf7b98c27992cb6abda34 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/docs/4.3/layout/grid.md b/site/docs/4.3/layout/grid.md index f03808044c2465d9f5358fae358339325413d9c2..3b79360fe34c54ded608d8536a1774299c3221f1 100644 --- a/site/docs/4.3/layout/grid.md +++ b/site/docs/4.3/layout/grid.md @@ -381,6 +381,20 @@ Use these row columns classes to quickly create basic grid layouts or to control {% include example.html content=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); + } +} +{% endhighlight %} + ## 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)