title: How to create a responsive (varying column count) Angular-Material card grid
body: <p>I'm trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid. Ideally, cards will be full-width for small screen widths and jump to two columns at larger breakpoints.</p>
  
  <p><a href="http://jsfiddle.net/isherwood/2afaok1n/1/" rel="nofollow noreferrer">Demo with 2 cards</a></p>
  
  <p>The problem is that A-M creates columns for each card. I haven't figured out how to specify the number of columns for each breakpoint. </p>
  
  <p><a href="http://jsfiddle.net/isherwood/2afaok1n/2/" rel="nofollow noreferrer">Demo with 5 cards</a></p>
  
  <p>Here's the basis of the markup I'm using, which takes the card layout from rows to columns at the first breakpoint:</p>
  
  <pre><code>&lt;div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row"&gt;
    &lt;div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index"&gt;
      &lt;md-card&gt;
  </code></pre>
  
  <p>There's a <a href="https://stackoverflow.com/questions/31726180/trying-to-have-a-grid-of-card-with-angular-material">similar question on SO</a> already, but accepted answer is unsatisfactory as it uses custom CSS and the cards aren't fluid-width. I've found no other similar examples.</p>
  
  <p>I suppose I could loop every two cards with Angular and create stacked sets, but that seems needlessly cumbersome. I have to think that Material provides for a better solution. Also, such solutions would leave whitespace in the page where cards vary in height. Material seems geared toward a Masonry-like flex layout, and I'd like to stick with that. </p>
  
  <p>Thanks. </p>