Dynamic Height Card display in Grid-list
<p>I am using angular material to create my site. I would like to display my products in a grid list with each tile has a dynamic height so that the result should be in like this page <a href="https://www.tumblr.com/search/printify" rel="nofollow">https://www.tumblr.com/search/printify</a>.</p>

<p>I tried to do something like </p>

<pre><code>&lt;div class="md-padding" layout="row" layout-xs="column" layout-wrap&gt;
 &lt;div flex-xs="50" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="n in [0,1,2,3]"&gt;
   &lt;md-card md-whiteframe="4" ng-repeat="result in result[n] | limitTo:limit" &gt;
     ......
   &lt;/md-card&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>it works fine in 4-col display. however when resizing the screen to md and display in 3-col, the 4th-column is display under the 1st-column and quite ugly.</p>

<p>I hv tried on Grid-list too but no clue, may anyone can help, please? </p>