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 gri

Answer 1

Addition to the @Leo Caserio' s answer, if you get an error on the first load as follows:

Error: mat-grid-list: must pass in number of columns. Example: ...

You can use subject:

Component

@ViewChild('grid',{static:true}) grid: MatGridList;
cols:Subject = new Subject();

constructor(private observableMedia: MediaObserver) { }

ngAfterContentInit() {
    this.observableMedia.asObservable().subscribe((change: MediaChange[]) => {
      this.cols.next(this.gridByBreakpoint[change[0].mqAlias]);
    });
  }

Template

Note: @angular/flex-layout": {"version": "8.0.0-beta.26" }