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