Question

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

我尝试过的事情：

使用选择器width将每张卡片的CSS height和mat-card设置为100％。这会导致每张卡片都填满整个屏幕，而不仅仅是包含该卡片的mat-grid-tile。
使用选择器width将每张卡片的CSS height和mat-grid-tile > mat-card设置为100％。这与没有选择器的效果相同，因为卡片在其网格图块中保持居中，并以其各自内容的大小包裹。
关注this question中的代码。问题是我无法使用属性flex，layout-wrap和layout-fill，可能是因为示例代码使用的是Angular 2而不是4。

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

Answer 1

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

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

如果你担心（就像我一样）支持css calc()这里支持的浏览器和版本：http://caniuse.com/#feat=calc

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