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.

Answer 1

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)