填充半行Angular MD Grid List中的间隙

Question

我正在尝试使用Angular Material Design生成网格。出于某种原因，我的桌子上有一个间隙，而且瓷砖没有均匀排列。我的HTML是：

<mat-grid-list class='table-list' cols="3" rowHeight="50px">
  <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

我的图块定义如下：

tiles = [
    {text: '1sg', cols: 1, rows: 2, color: 'lightblue'},
    {text: '1du.incl', cols: 1, rows: 1, color: 'lightgreen'},
    {text: '1pl.incl', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '1du.excl', cols: 1, rows: 1, color: 'lightpink'},
    {text: '1pl.excl', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '2sg', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '2du', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '2pl', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '3sg.n', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '3du.m', cols: 1, rows: 1.5, color: '#DDBDF1'},
    {text: '3pl.n', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '3sg.f', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '3pl.f', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '3sg.m', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: '3du.f', cols: 1, rows: 1.5, color: '#DDBDF1'},
    {text: '3pl.m', cols: 1, rows: 1, color: '#DDBDF1'},
];

将3du.f放在3sg.m和3pl.m之间留下.5行空间（图2）并将3du.f置于3sg.f和3pl.f之间将其置于错误的列中（图1）：