角度材料:制作垫卡填充整个垫网格

Question

我想用来mat-grid-list创建一个网格列表布局,其中每个mat-grid-tile包含一个mat-card填充整个图块的格式,而不管卡的内容如何.大多数卡需要占用多行和/或列.到目前为止,我还没有能够使它工作.

我尝试过的事情:

• 使用选择器设置每张卡的CSS width和height100%mat-card.这导致每张卡片填满整个屏幕,而不仅仅是mat-grid-tile包含卡片的卡片.
• 使用选择器设置每张卡的CSS width和height100%mat-grid-tile > mat-card.这与没有选择器具有相同的效果,因为卡片仅在它们的网格区块中保持居中,所述网格区块被包裹到它们各自内容的大小.
• 遵循这个问题的代码.问题是属性flex,layout-wrap并且layout-fill我无法使用,可能是因为示例代码使用的是Angular 2而不是4.

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

Answer 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

(答案根据第一评论更新)