title: To set adjustable row-height in mat-grid-list
body: <p>I am defining 3 columns using  <code>mat-grid-list</code> like this.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;mat-grid-list [cols]="breakpoint" rowHeight="200px" 
         (window:resize)="onResize($event)"&gt;
         &lt;mat-grid-tile&gt;1&lt;/mat-grid-tile&gt;
         &lt;mat-grid-tile&gt;2&lt;/mat-grid-tile&gt;
         &lt;mat-grid-tile&gt;3&lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <p>Here i have set row height to 200px (<strong>rowHeight="200px"</strong>), Now height of each row is same as shown in below image.</p>
  
  <p><a href="https://i.stack.imgur.com/C7cFz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C7cFz.png" alt="enter image description here"></a></p>
  
  <p>But i need to set height of the row according the content present inside it.As shown in below image.</p>
  
  <p><a href="https://i.stack.imgur.com/tJFoL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tJFoL.png" alt="enter image description here"></a></p>
  
  <p>How can i achieve this? Here is the <a href="https://stackblitz.com/edit/angular-demo-mat-grid-cu7zzp?file=app%2Fdemo%2Fdemo.component.html" rel="nofollow noreferrer">stackblitz</a> link.</p>