Angular Material: making a mat-card fill an entire mat-grid-tile

Question

I want to use mat-grid-list to create a grid list layout in which each mat-grid-tile contains a mat-card that fills the entire tile regardless of the card's content. Most of the cards need to occupy multiple rows and/or columns. So far I haven't been able to get it working.

Things I have tried:

Setting each card's CSS width and height to 100% using the selector mat-card. This causes each card to fill the entire screen rather than just the mat-grid-tile that contains the card.
Setting each card's CSS width and height to 100% using the selector mat-grid-tile > mat-card. This has the same effect as not having a selector at all, as the cards just remain centered within their grid tiles wrapped to the sizes of the their respective contents.
Following the code in this question. The problem is that the properties flex, layout-wrap, and layout-fill are not available to me, probably because the sample code is using Angular 2 rather than 4.

Edit: It looks like I misunderstood the results of the first attempt listed above. The cards actually fill just the mat-grid-tiles but their surrounding shadows get cut off by the tiles' boundaries.

Aviad P. Aviad P. · Accepted Answer · 2017-11-05T18:14:46

I am not sure what exactly is not working for you, but I have just recreated your scenario in stackblitz, and used the following style for mat-card:

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

Here's the stackblitz link: https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css

And just in case you are worried (as I was) about the support for css calc() here's the supported browsers and versions: http://caniuse.com/#feat=calc

(answer was updated based on first comment)

Angular Material: making a mat-card fill an entire mat-grid-tile

1 Answers