How to Angular material card align
<p>i want to align cards like below image</p>

<p><a href="https://i.stack.imgur.com/Odi71.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Odi71.png" alt="enter image description here"></a></p>

<p>But my cards are aligned like this</p>

<p><a href="https://i.stack.imgur.com/OVaAn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OVaAn.jpg" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/v0eLc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v0eLc.jpg" alt="enter image description here"></a></p>

<p>Here is my html code</p>

<pre><code>&lt;md-content class="md-padding"  layout="row"  layout-wrap flex&gt;
&lt;div layout="column" ng-repeat="product in vm.result" flex="30"&gt;

  &lt;md-card &gt;
    &lt;md-card-header&gt;
      &lt;md-card-header-text&gt;
        &lt;span class="md-title"&gt;{{ product.Product_Name }}&lt;/span&gt;

      &lt;/md-card-header-text&gt;
    &lt;/md-card-header&gt;
    &lt;img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here"&gt;
    &lt;md-card-title&gt;
      &lt;md-card-title-text&gt;
        &lt;span class="md-subhead" style="font-weight: bold;"&gt;Brand: &lt;/span&gt;&lt;span style="margin-left:10px"&gt;{{ product.Brand }}&lt;/span&gt;
        &lt;span class="md-subhead" style="font-weight: bold;"&gt;Color: &lt;/span&gt;&lt;span style="margin-left:10px"&gt;{{ product.Color }}&lt;/span&gt;
        &lt;span class="md-subhead" style="font-weight: bold;"&gt;Price: &lt;/span&gt;&lt;span style="margin-left:10px"&gt;{{ product.Price }}&lt;/span&gt;
        &lt;span class="md-subhead" style="font-weight: bold;"&gt;Url: &lt;/span&gt;&lt;span style="margin-left:10px"&gt;&lt;a ng-href="{{ product.Url }}"&gt;{{ product.Url }}&lt;/a&gt;&lt;/span&gt;
        &lt;span class="md-subhead" style="font-weight: bold;"&gt;Category: &lt;/span&gt;&lt;span style="margin-left:10px"&gt;{{ product.Category }}&lt;/span&gt;
        &lt;span class="md-subhead" style="font-weight: bold;"&gt;Description: &lt;/span&gt;&lt;span style="margin-left:10px"&gt;{{ product.Description }}&lt;/span&gt;
      &lt;/md-card-title-text&gt;
    &lt;/md-card-title&gt;
    &lt;md-card-actions layout="row" layout-align="end center"&gt;
      &lt;md-button class="send-button md-accent md-raised" ng-click="vm.editDialog($index,product._id)"&gt;Edit&lt;/md-button&gt;
      &lt;md-button name="ProductId" class="send-button md-accent md-raised" ng-click="remove(product._id,'{{$index}}')"&gt;Remove&lt;/md-button&gt;
    &lt;/md-card-actions&gt;
  &lt;/md-card&gt;
&lt;/div&gt;  
</code></pre>

<p>  </p>

<p>i am trying to do this from yesterday but i am not. somebody please help me</p>