How do I stop md-card from taking full horizontal width? How do I place them side by side?

Question

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).

Answer 1

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

http://plnkr.co/edit/zHndJLKRSvTQUV1G6Bgp

Answer 2

Flex-box is a latest approach as shown in other answer but you might face problem with few browsers as it is not fully supported by all browsers.So, Other than that, Twitter-bootstrap-css can also be used as followed,

<div class="col-xs-12">
     <div class="col-sm-6">
             <md-card>
                  ...
             </md-card>
     </div>

     <div class="col-sm-6">
              <md-card>
                   ...
              </md-card>
     </div>
</div>