Angular Material 2 - 响应式网格列表

【问题标题】：Angular Material 2 - Responsive Grid ListAngular Material 2 - 响应式网格列表
【发布时间】：2018-08-23 17:19:40
【问题描述】：

我正在尝试在 Angular Material 2 中创建一个响应式网格列表。这是我目前所拥有的

https://stackblitz.com/edit/angular-r1j8yz?file=app%2Fgrid-list-dynamic-example.ts

我正在使用 flex 布局，但是这使得卡片之间的空间很大，如您所见。有什么方法可以让这些响应式响应而没有那么大的差距？

谢谢！

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

<mat-grid-list cols="2" rowHeight="1:1.4"    gutterSize="10px"  >
  <mat-grid-tile
      *ngFor="let tile of tiles">
      <mat-card  >
        <mat-card-header>
          <mat-card-title>My Card</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
        <mat-card-content>
          {{tile.text}}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
          <button mat-button>SHARE</button>
        </mat-card-actions>
      </mat-card>
  </mat-grid-tile>
</mat-grid-list>

这里有一些针对您的响应式网格的修复，但您需要将字体与 vw 一起使用才能完全响应。

【讨论】：

这正是我想要的。谢谢！