Question

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

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

我正在使用flex布局，但是如你所见，这会使卡之间的空间变得很大。有没有办法让你在没有这么大差距的情况下做出这些响应？

谢谢！

Answer 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完全响应。

角度材料2 - 响应式网格列表

1 个答案: