Angular Material：制作一张mat-card填充整个mat-grid-tile答案

【问题标题】：Angular Material: making a mat-card fill an entire mat-grid-tileAngular Material：制作一张mat-card填充整个mat-grid-tile
【发布时间】：2018-04-17 21:34:58
【问题描述】：

我想使用mat-grid-list 创建一个网格列表布局，其中每个mat-grid-tile 都包含一个mat-card，无论卡片的内容如何，它都会填充整个磁贴。大多数卡片需要占用多行和/或多列。到目前为止，我还不能让它工作。

我尝试过的事情：

使用选择器 mat-card 将每张卡的 CSS width 和 height 设置为 100%。这会导致每张卡片填满整个屏幕，而不仅仅是包含卡片的 mat-grid-tile。
使用选择器 mat-grid-tile > mat-card 将每张卡的 CSS width 和 height 设置为 100%。这与完全没有选择器具有相同的效果，因为卡片只是保持在其网格图块中的中心，这些网格图块被包裹到其各自内容的大小。
遵循this question 中的代码。问题是属性flex、layout-wrap 和layout-fill 对我不可用，可能是因为示例代码使用的是Angular 2 而不是4。

编辑：看起来我误解了上面列出的第一次尝试的结果。这些卡片实际上只填充了mat-grid-tiles，但它们周围的阴影被瓷砖的边界切断了。

【问题讨论】：

标签： angular layout angular-material angular-material2

【解决方案1】：

我不确定究竟是什么不适合你，但我刚刚在 stackblitz 中重新创建了你的场景，并为 mat-card 使用了以下样式：

mat-card {
  width: calc(100% - 70px);
  height: calc(100% - 70px);
}

这是 stackblitz 链接：https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css

以防万一您（和我一样）担心对 css 的支持 calc() 以下是支持的浏览器和版本：http://caniuse.com/#feat=calc

（答案已根据第一条评论更新）

【讨论】：

谢谢。当没有瓦片占用超过 1 行或列时，这很有效。然而，当瓦片占据不同数量的行和/或列时，当它们都具有相同的百分比宽度和高度时，它们往往不会相互对齐。我意识到可以计算每张卡片的特定百分比宽度/高度以便将它们排列起来，但这将是一个漫长且不方便的过程。我已经更新了我的问题以指定多列/行卡的需求。
立即尝试，stackblitz 已更新，它们对齐得很好。