Overview
Trying to find a new way to do responsive card decks while not locking ourselves into more card classes. My thinking here is we can easily control the column (.col) width by the parent with responsive .row-cols-* classes, but I don't know how many we need (have 0-5 now).
<!-- Three columns at the medium breakpoint and up -->
<div class="row row-cols-md-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div> <!-- Wraps to new line here -->
<div class="col">Column</div>
<div class="col">Column</div>
</div>/cc @twbs/css-review
How it works
We can add a default number of columns to support (thinking a max of 6). You can override this if you like, but otherwise we'll loop over it and generate the responsive classes.
Here's a simplified example with out the responsive infixes. See it in action via Sassmeister.
$row-columns: 6 !default;
@for $i from 1 through $row-columns {
.row-cols-#{$i} > [class^="col"] {
flex: 0 0 calc(100% / #{$i});
}
}Screenshots
Some screenshots to show how it's shaping up for grid columns and cards.
Preview: https://deploy-preview-29073--twbs-bootstrap.netlify.com/docs/4.3/components/card/#grid-cards
https://deploy-preview-29073--twbs-bootstrap.netlify.com/docs/4.3/layout/grid/#row-columns