Not able to properly display Card inside of grid

Question

I am having a bit of an issue displaying a card properly inside a grid. I am using material UI.

This is the code snip that is causing issues:

<mat-grid-list cols="5" rowHeight="1:1">
  <mat-grid-tile *ngFor="let review of reviews">
    <mat-card class="card-container" >
      <mat-card-title>
        <app-stars rating="{{ review.rating }}"></app-stars>
      </mat-card-title>
  
      <mat-card-content>{{
        review.text.length > 150
          ? (review.text | slice : 0 : 150) + "..."
          : review.text
      }}</mat-card-content>
      <mat-card-footer>
        <p>- {{ review.user.name }}</p>
        <p>- source: {{ review.source }} || {{ review.time_created | date }}</p>
      </mat-card-footer>
    </mat-card>
  </mat-grid-tile>
</mat-grid-list>

here is a video explaining the issue: https://youtu.be/ZO-tCmTiH5g

Now that I am writing this, maybe I have to set the number of columns to display when the viewport gets below some minimum? I just tried this and it kinda works. Not sure that this is the correct way to do it, though.

Is there a way to do this better?

I would like to make it look something like this :: https://preview.themeforest.net/item/archi-interior-design-wordpress-theme/full_screen_preview/12649286?_ga=2.32530814.1141413166.1671312829-1736831966.1665092146

this is where all my code lives :: https://github.com/casas1010/angular-website

I didn't see a similar StackOverflow question