Create a masonry-like md-grid-list with angular material

Question

I am trying to implement the md-grid-list in a masonry style but I seem to be stuck with having to decide on how many rows I want the display to stretch.

I want to display various images that have different ratio (think pinterest) so that ratio of col versus row might not always work. Is there any way to do so with material design without having to crop the picture or strech them?

PS : I am aware of Disandro's masonry, I am looking for a pure material design solution.

I reused the code from here : https://material.angularjs.org/#/demo/material.components.gridList

Thanks

Answer 1

Kuzzmi, you are a genius Something like this worked (to be improved)

1- You make md-grid-list the same amount of columns than the width of your container

2- the md-rowspan and md-colspan needs to have the size of the image. I am sure there are things to improve (window resize, etc... but the idea is there)

Happy to hear your thoughts

<md-grid-list md-cols="1133" md-row-height="1:1">
<md-grid-tile ng-repeat="i in images" md-rowspan="{{i.h}}" md-colspan="{{i.w}}">
  <img ng-src="{{i.src}}"/>
  <md-grid-tile-footer>
    <h3>{{i.title}}</h3>
  </md-grid-tile-footer>
</md-grid-tile>