Question

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>

如何为第一mat-grid-tile赋予30％的宽度，为第二mat-grid-tile赋予70％的宽度，如何为所有设备设置mat-grid-tile的等效高度？

Answer 1

您可以添加colspan。确保col span的总和等于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>

工作Stackblitz

Answer 2

@Venetian Village ..您可以使用CSS的行类来指定浏览器的宽度。这里height :100vh占用了整个浏览器窗口的高度，或者如果您要使用父级的div，请使用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>

如何设置垫子网格宽度

2 个答案: