'Angular Material Cards in a Grid via NgFor, if one card changes height, then all cards in the same row do as well. How to disable this behavior?

I have a grid in which I create multiple mat-cards via ngFor. These mat cards contain a button each which expands the card itself.

.outerDiv{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 5fr));
    grid-column-gap: 20px;
    align-items: stretch;
  }

.innerMatCardContainer {
    box-shadow: 5px 5px 3px -3px var(--hailoDarkGray);
    border-radius: 2px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
  }

The problem is, that if one card is expanded, then all cards in that row also expand.

Is there a way to disable this behavior, so as to achieve a row of mat cards, each being able to be differently sized?

Here is a demonstrative graphic of the issue:

javascripthtmlcssangular


Sources

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

Source: Stack Overflow

Solution Source

Related Questions