How to set width of mat-grid-tile

问题

HTML

 <mat-grid-list cols="2" [cols]="breakpoint" rowHeight="486px" (window:resize)="onResize($event)">
   <mat-grid-tile >

   </mat-grid-tile>
   <mat-grid-tile >

   </mat-grid-tile>
</mat-grid-list>

How can i give width of 30% for 1st mat-grid-tile 70% for 2nd mat-grid-tile, and how can i set the height of mat-grid-tile equivalent for all the devices?

回答1:

You can add colspan. Make sure that the sum of col span is equal to cols Size.

<mat-grid-list cols="4" rowHeight="2:1" >
<mat-grid-tile colspan="3">1</mat-grid-tile>
<mat-grid-tile colspan="1">2</mat-grid-tile>
</mat-grid-list>

Working Stackblitz

回答2:

@Venetian Village.. you can devide the width of browser with the row class of CSS. Here height :100vh is taking complete the browser window height or if you want use parent's div use height: 100%.

 <mat-grid-list class="row" cols="2" [cols]="breakpoint" (window:resize)="onResize($event)" style="height:100vh">
       <mat-grid-tile class="col col-lg-4 col-sm-4">

       </mat-grid-tile>
       <mat-grid-tile class="col col-lg-8 col-sm-8">

       </mat-grid-tile>
    </mat-grid-list>

来源：https://stackoverflow.com/questions/51874045/how-to-set-width-of-mat-grid-tile