可以使用CSS样式来对齐mat-grid-tile。在mat-grid-tile的父元素上设置display: flex和flex-wrap: wrap,然后在mat-grid-tile上设置flex属性以指定所占的比例。示例代码如下:
HTML代码:
Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
CSS代码:
.grid-container {
display: flex;
flex-wrap: wrap;
}
.mat-grid-tile {
flex: 1 0 calc(33.33% - 10px);
}
上面的代码设置了mat-grid-tile父元素的display属性为flex,这会使子元素mat-grid-tile变为flex子项。然后,在.mat-grid-tile样式中设置了flex属性,它的第一个值表示比例,第二个值表示是否可缩放,第三个值表示基础大小。这里的比例为1,表示每个mat-grid-tile的大小相等,基础大小为calc(33.33% - 10px),前面的33.33%是因为我们的网格列表有3列。如果你想增加或减少列数,也要相应地调整基础大小。最后,由于网格列表中的元素之间可能需要留白,可以通过flex-grow和flex-basis属性来调整这个空间。