Css 如何在mat菜单中将mat网格显示为响应

我有材质网格和菜单。我像工具提示一样使用mat菜单，下面还有其他网格，每个网格都有这个mat菜单。当用户单击它时，用户应该看到出现的框和里面的内容。我决定在里面使用Mat Grid，但它不像往常那样负责。Mat-Grid是灵活的，因为用户保护其位置的行为。这就是我想要的。但是当你改变页面宽度时，Mat Grid并没有变小

StackBlitz演示：

当页面为原始大小（PC、笔记本电脑等）时，它看起来很好

这里存在以下问题（平板电脑、手机等的宽度不会像外面的网格一样变小）

]

HTML:
HTML：
我检查过了。但这不是我要找的。这只是在宽度改变后改变列的对齐方向。但我希望它们在宽度变小时缩小。如果我错了，请编辑我的stackblitz并共享。我已经更改了您的代码。请检查我检查过了，但这不是预期的。看那个菜单没有完全打开我选中了。但这不是我要找的。这只是在宽度更改后更改列的对齐方向。但我希望它们在宽度变小时缩小。如果我错了，请编辑我的堆栈Blitz并共享。我已更改了代码，请检查我选中的，但这不是正如所料。看，菜单没有完全打开
HTML:

    <mat-grid-list [cols]="breakpoint" rowHeight="2:0.5 (window:resize)="onResize($event)">
    <`enter code here`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>

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

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