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

Hope this helps!

Answer 2

I liked Altus answer, but I would like to have more breakpoints. So I've created a simple method with some breakpoints using FlexLayout ObservableMedia service instead of onResize:

import { AfterContentInit, Component, ViewChild } from '@angular/core';    import { MediaChange, ObservableMedia } from '@angular/flex-layout';  import { MatGridList } from '@angular/material';    @Component({    selector: 'app-grid',    templateUrl: './grid.component.html',    styleUrls: ['./grid.component.css']  })  export class GridComponent implements AfterContentInit {    @ViewChild('grid') grid: MatGridList;      gridByBreakpoint = {      xl: 8,      lg: 6,      md: 4,      sm: 2,      xs: 1    }      constructor(private observableMedia: ObservableMedia) {}      ngAfterContentInit() {      this.observableMedia.asObservable().subscribe((change: MediaChange) => {        this.grid.cols = this.gridByBreakpoint[change.mqAlias];      });    }  }

<span>Breakpoint: {{grid.cols}}</span>  <mat-grid-list #grid rowHeight="2:1">    <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-tile>7</mat-grid-tile>    <mat-grid-tile>8</mat-grid-tile>  </mat-grid-list>

See https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro