将mat-card放入mat-grid-list中

Question

我正在用卡片网格构建一个Angular网页。为了做到这一点，我使用了mat-grid-list，里面有许多mat-grid-tile成分。每个瓷砖里面都有一个mat-card

这里有一个关于stackblitz

的最小示例我希望每个卡片都精确地填充它自己的父磁片。

Answer 1

在css中修改一下:

mat-card {
border: 4px solid green;
width: 100%;
height: 100%-5;
}

:

mat-card {
border: 4px solid green;
width: 100%;
height: calc(100% - 5px);
}

在css中，如果你想做数学运算，你可以使用calc()函数。

Answer 2

将height: 100%添加到mat-card:

mat-card {
height: 100%;
}

工作示例