title: Trying to have a grid of card with angular material
body: <p>I have been trying to have a grid of card using angular-material. So I am using the directives md-grid-list and md-card. but the result is pretty ugly, and I am not sure to understand how the md-row-heigh (ratio) works, I have the documentation, but it doesn't say a lot.</p>
  
  <p>Here is what I have been doing so far :
  <a href="http://codepen.io/stunaz/pen/qdQwbq">http://codepen.io/stunaz/pen/qdQwbq</a> , I am trying to have a responsive grid of card, not even sure if the md-grid-list is appropriate here.</p>
  
  <pre><code>  &lt;md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px"&gt;
  
  &lt;md-grid-tile class="gray" ng-repeat="user in users"&gt;
    &lt;md-card&gt;
      &lt;img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"&gt;
      &lt;md-card-content&gt;
        &lt;h2&gt;{{user}}&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt;/p&gt;
      &lt;/md-card-content&gt;
      &lt;div class="md-actions" layout="row" layout-align="end center"&gt;
        &lt;md-button&gt;Save&lt;/md-button&gt;
        &lt;md-button&gt;View&lt;/md-button&gt;
      &lt;/div&gt;
    &lt;/md-card&gt;
  &lt;/md-grid-tile&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am open to any kind of help.</p>