title: To set different width for mat-grid-tile in mat-grid-list component
body: <p>I am using <code>&lt;mat-grid-list&gt;</code> in my project as shown in below code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;mat-grid-list cols="2" [cols]="breakpoint" rowHeight="240px"  (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-list&gt;
  </code></pre>
  
  <p><strong>TS</strong> </p>
  
  <pre><code> import {Component, OnInit, VERSION, ViewChild } from '@angular/core';
  
   export class CustomersComponent implements OnInit {
       public ngVersion: string = VERSION.full;
       public matVersion: string = '5.1.0'; 
       public breakpoint: number; 
  
       ngOnInit() {
         this.breakpoint = (window.innerWidth &lt;= 600) ? 1 : 2;
       }
  
       onResize(event) {
         this.breakpoint = (event.target.innerWidth &lt;= 600) ? 1 : 2;
      }
  
    }
  </code></pre>
  
  <p>How can i set first <code>&lt;mat-grid-tile&gt;</code> width to <strong>40%</strong> and second  <code>&lt;mat-grid-tile&gt;</code> width to <strong>60%</strong>.Tried this <a href="https://stackoverflow.com/questions/51874045/how-to-set-width-of-mat-grid-tile/51874520">answer</a> too, still no result.
  Here is the <a href="https://stackblitz.com/edit/angular-demo-mat-grid-q3pvwd?file=app/demo/demo.component.html" rel="nofollow noreferrer">stackblitz</a> link</p>