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: