Html 显示“铺在网格上的柔性”平铺角度

我正在尝试使用

显示：flex将
垫子网格平铺内的卡片隔开
但是，这些卡被粘在一起，它们之间没有空间。我该怎么做才能让他们看起来更分散

HTML

<mat-grid-tile [colspan]="3" [rowspan]="2" class="productTile">

    <mat-card *ngFor="let product of products" class="productCard">
      <mat-card-header>
        <ngx-avatar mat-card-avatar class="my-avatar" value={{product.authorInitials}} *ngIf="product.authorProfile == ''" class="avatar-header" size="40"> </ngx-avatar>
        <ngx-avatar mat-card-avatar class="my-avatar" src={{product.authorProfile}} *ngIf="product.authorProfile != ''" class="avatar-header" size="40"> </ngx-avatar>
        <mat-card-title>{{product.title}}</mat-card-title>
        <mat-card-subtitle>{{product.author}}</mat-card-subtitle>
        <button mat-icon-button matTooltip="Edit Post"><mat-icon class="toggle-icon">edit</mat-icon></button>
        <button mat-icon-button matTooltip="Delete Post" (click)="deletePost(product.postID)"><mat-icon class="toggle-icon">delete</mat-icon></button>
      </mat-card-header>
      <img mat-card-image [src]="product.imageLinks ? product.imageLinks[0] : null" alt="Photo" class="cardImage">
      <mat-card-content>
        <p>
          {{product.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </mat-grid-tile>

请看这个答案：

您可以使用属性
gutterSize

.productTile{
  display: flex;
  justify-content: space-around;
}