如何设置mat-grid-tile的宽度 [英] 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>

如何为第一个 mat-grid-tile 提供 30% 的宽度，为第二个 mat-grid-tile 提供 70% 的宽度，以及如何设置高度mat-grid-tile 等价于所有设备?

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?

推荐答案

您可以添加 colspan.确保 col span 的总和等于 cols Size.

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>

工作 Stackblitz

这篇关于如何设置mat-grid-tile的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！