Dynamic Height Card display in Grid-list

Question

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 https://www.tumblr.com/search/printify.

I tried to do something like

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

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.

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

Mike Feltman Mike Feltman · Accepted Answer · 2016-05-19T18:15:09

I'd recommend using md-grid list. I edited Codepen from the Angular Material site here: http://codepen.io/anon/pen/qZzmpa and added a card to the tiles. With just:

<md-card>
    <md-card-content>
        Hi I'm a card
    <md-card-content>
<md-card>

inside the tiles and it's pretty close.

https://material.angularjs.org/latest/demo/gridList

Dynamic Height Card display in Grid-list

1 Answers