Angular 5 Mat-grid list responsive

Question

i created grid list with column 6 and i want to be grid title take 100% width on small screen devices. Now it creates 6 column on small screens as well

Expected: One grid-title occupies 100% of space on mobile device only

Answer 1

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