Card layout
HTML
<div class="card-layout">
<!-- A card with given width -->
<div class="card-layout__item">...</div>
<!-- Repeat other cards -->
...
</div>
CSS
.card-layout {
display: flex;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.card-layout__item {
/* There will be 3 cards per row */
flex-basis: 33.33333%;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
Demo