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

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.

angularlayoutangular-materialangular-material2


Solution 1:[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)

Solution 2:[2]

The solution without calc:

You have to make use of box-sizing: border-box;

parent {
  width: 100%;  /* OR like 95% to make shadows visible */
  height: 100%; /* OR like 95% to make shadows visible */
}

mat-card {
  width: inherit;
  height: inherit;
  box-sizing: border-box;
}

See: https://stackoverflow.com/a/49796258/3370568

OR even better:

parent {
  width: stretch;
  height: stretch;
  margin: 5px;
}

mat-card {
  height: stretch;
  width: stretch;
  box-sizing: border-box;
}

Oops, another solution! You may not even need that mat-card.

<mat-grid-tile class="mat-elevation-z4" style="border-radius: 4px;">

</mat-grid-tile>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions