CODEWITHSUNDEEP
angularangular-material2
Shadow1349
Shadow1349

Reputation: 771

Angular Material 2 - Responsive Grid List

I am trying to make a grid list in Angular Material 2 responsive. Here is what I've got currently

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

I am using the flex layout but that make the space between cards MASSIVE, as you can see. Is there any way that you can make these responsive without having that huge gap?

Thanks!

Upvotes: 0

Views: 5773

Answers (1)

Nestor
Nestor

Reputation: 694

<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>

Here are some fixes for your responsive grid, but you need to put your font with vw to be completely responsive.

Upvotes: 3

Related Questions