I've been using angular2-material in my side project and have been unable to stack cards horizontally. They automatically take up the full width. Limiting the width through a css class does not cause them to stack. All subsequently placed cards will still be placed below the previous.
I would appreciate some guidance on getting the cards to sit side-by-side horizontally (and appropriately wrapping when they get to the edge of the screen).
You could use flex-box:
https://jsfiddle.net/ntmrtnwu/
HTML
<div class="parent">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
CSS
.parent {
display: flex;
justify-content: space-between;
}
.child {
margin: 10px;
background: red;
width: 100%;
height: 20px;
}
Replace the child divs with the <md-card></md-card> selector but do place them inside a parent div with the flex properties. Should work. If you can't make it work I can create a plnkr with material2
EDIT
Material 2 plunker with functioning flex