Angular 7材质卡片看起来像pinterest？

Question

有没有办法使有角度的材料卡看起来像pinterest布局？

这是我的代码：

<div fxFlex fxLayout="column" fxLayoutGap="10px" style="height: 100vh">
  <div fxLayout="row wrap">
    <!-- loop over the cardList and show the cards -->
    <div
      *ngFor="let card of cardList"
      fxFlex="25"
      fxFlex.md="33"
      fxFlex.sm="50"
      fxFlex.xs="100"
      fxLayout="column"
      style="padding: 5px;"
    >
      <!-- cards here -->
      <mat-card class="mat-elevation-z1">
        <img mat-card-image [src]="card.imgSrc" />
        <mat-card-title> {{ card.title }} </mat-card-title>
        <mat-card-content> {{ card.description }} </mat-card-content>
        <mat-card-footer>
          <button fxFlex mat-flat-button color="primary">
            Do Something Button
          </button>
        </mat-card-footer>
      </mat-card>
    </div>
 </div>
</div>

我想避免该空白，并像pinterest一样用其他卡片中的一部​​分填充

或者类似Bootstrap的东西，例如：

有角的卡片甚至有可能吗？我已经在网上搜索了，还没有运气，如果有人知道一种方法，请帮帮我...谢谢！

Answer 1

您可以使用boostrap将卡片放置在“ col-3”类的元素内，并重复复制该元素3次，以创建四列，每列包含所需的卡片。

别忘了在“行”类元素内创建四列。