设置网格中列的比率

时间:2019-05-24 09:31:49

标签: html css angular-material

如何在mat-grid中设置cols的宽度。 这是我的示例Stackblitz。我想将第一列的比率设置为30%,将另一列的比率设置为70%。 在CSS Grid中,我们可以这样做:

.grid-container {
display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-template-rows: 1fr;
grid-template-areas: "\31  \32 ";
}

.\31  { grid-area: \31 ; }
.\32  { grid-area: \32 ; }

1 个答案:

答案 0 :(得分:0)

只需添加col-span就可以了。 确保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>

工作Stack blitz

如果删除列跨度,则两列的比率均为50%。 同样,您也可以设置行跨度。