如何将mat-menu内的mat-grid显示为响应

<mat-menu #menu="matMenu">
  <mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile *ngFor="let item of items">
      <!-- 内容 -->
    </mat-grid-tile>
  </mat-grid-list>
</mat-menu>

mat-grid-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  mat-grid-list {
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  mat-grid-list {
    justify-content: flex-start;
  }
}

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  // 组件配置
})
export class YourComponent {
  cols$: Observable<number>;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.cols$ = this.breakpointObserver.observe([Breakpoints.Handset, Breakpoints.Tablet])
      .pipe(
        map(result => {
          if (result.breakpoints[Breakpoints.Handset]) {
            return 2;
          } else if (result.breakpoints[Breakpoints.Tablet]) {
            return 3;
          } else {
            return 4;
          }
        })
      );
  }
}

<mat-menu #menu="matMenu">
  <mat-grid-list [cols]="cols$ | async" rowHeight="100px">
    <mat-grid-tile *ngFor="let item of items">
      <!-- 内容 -->
    </mat-grid-tile>
  </mat-grid-list>
</mat-menu>