How to show mat-grid inside mat-menu as responsive - css

Question

I have material grid and menu .I use mat-menu like tooltip,there will be other grids below and each of them have this mat-menu.When user clicks it,user should see appeared box and whats inside.I decided to use Mat-Grid inside but it isn't being responsible as usual it is.Mat-grid is flex and skrinking due to user's action as protecting its position.Thats what I want.But mat-grid here isn't getting smaller as big mat-grid does when you change the page width.
StackBlitz Demo : https://stackblitz.com/edit/angular-material-bootstrap-css-zcjddn?file=src/app/app.component.html
That looks well when page is orginal size(PC,Laptop etc)
Here that problem exists below(Width for tablet , mobile etc.Not getting smaller like grid on the outside)
]2

Answer 1

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>
.ts file:
ngOnInit() {
this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}
onResize(event) {
this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}
Check Stackblitz demo here