Установить соотношение столбцов в мат-сетке

Question

Как мне установить ширину столбцов в mat-grid. Это мой образец 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 ; }

Answer 1

Просто добавив 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>

Working Stack blitz

Если вы удалите span col, то оба столбца будутСоотношение 50%.Точно так же вы можете установить диапазон строк.