First pass at .row-cols classes

Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.

1 files changed, 12 insertions, 0 deletions

diff --git a/scss/_card.scss b/scss/_card.scss
index f68855c56c..9385859262 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -175,6 +175,18 @@
   }
 }
 
+$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