Responsive Design Using Md-Grid-List in Angular 2

Angular Material 2 - Responsive Grid List

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

Angular 2 md-grid-list set column with screen size

I found this link to help me solve the problem:
Change the layout or cols value of md-grid-list based on screen size

Also to make it work I had to install the flex layout module and used this:
https://github.com/angular/flex-layout/issues/457
and this:
https://github.com/angular/flex-layout/wiki/NPM-Installs

Angular Material md-grid-list?

I think the limit is based on your screen size. You can use the flex-layout library from the angular team to adjust the numbers of cols. Look at this article.

http://brianflove.com/2017/05/03/responsive-angular/

Angular 5 Mat-grid list responsive

You have to set the cols attribute of the mat-grid-list dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list render the 1-column version.

HTML:

<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>5</mat-grid-tile>
  <mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>

TS:

ngOnInit() {
    this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}

onResize(event) {
  this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}

Stackblitz demo here

Hope this helps!

Angular 4: Responsive Grid List

Not in pure html, you could find some html/ts solution though, something like this

If you want to achieve this only with html, take a look at the Angular Flex Layout framework instead of mat-grid-list.

---

Related Topics