Angular 角度材质：使一张垫子卡填充整个垫子网格瓷砖

我想使用

mat grid list

创建一个网格列表布局，其中每个

mat grid tile

都包含一个

mat card

，该卡片填充整个tile，而不考虑卡片的内容。大多数卡片需要占用多行和/或多列。到目前为止，我还没能让它工作

我尝试过的事情：

• 使用选择器将每张卡片的CSS

  宽度

  和

  高度

  设置为100%。这会使每张卡填满整个屏幕，而不仅仅是包含该卡的

  mat grid tile

• 使用选择器

  mat grid tile>mat card

  将每张卡的CSS

  宽度和
  高度设置为100%。这和根本并没有选择器的效果是一样的，因为卡片只是在其网格分幅内保持居中，并按照各自内容的大小进行包装

• 遵循中的代码。问题是属性

  flex

  、

  layout wrap

  和

  layout fill

  对我不可用，可能是因为示例代码使用的是Angular 2而不是4

---

编辑：看起来我误解了上面列出的第一次尝试的结果。这些卡实际上只填充了

垫子网格磁贴

s，但它们周围的阴影被磁贴的边界切断了。

我不确定到底是什么不适合您，但我刚刚在stackblitz中重新创建了您的场景，并对

垫子卡

使用了以下样式：

mat卡{
宽度：计算（100%-70px）；
高度：计算（100%-70px）；
}

以下是stackblitz链接：

如果您（像我一样）担心对css

calc（）

的支持，这里是支持的浏览器和版本：

---

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

谢谢。当平铺占用的行或列数不超过1行或列时，这种方法效果很好。但是，当瓷砖占据不同数量的行和/或列时，当所有瓷砖的宽度和高度百分比相同时，它们往往不会彼此对齐。我意识到，人们可以为每张卡片计算一个特定的宽度/高度百分比，以便排列它们，但这将是一个漫长而不方便的过程。我已经更新了我的问题，以指定对多列/行卡的需要。现在试试，stackblitz已更新，并且它们对齐得很好。