Angular Material Grid List 无法适配内容高度问题求助

我正在使用Angular Material构建响应式网格，网格内包含一系列项目。但在小屏幕下拉伸页面时，各列的内容完全无法显示，仅呈现固定高度。

问题截图：

问题原因 #

查看代码后发现，样式中强制设置了网格和网格项的固定高度：

.mat-grid-list { height: 200px !important; }
.mat-grid-tile { height: 200px !important; }

这会导致无论内容多少或屏幕尺寸如何，网格都被限制在固定高度内，小屏幕下内容溢出后直接被隐藏。

解决方案 #

1. 移除固定高度限制
   删除上述强制设置固定高度的样式代码，让Angular Material网格自动根据内容和屏幕尺寸调整高度。

2. 可选：设置最小高度
   如果需要保证网格项有基础高度，用min-height替代height，这样内容较多时网格项会自动扩展：

   .mat-grid-tile { min-height: 200px; }
   

3. 优化响应式配置
   结合窗口 resize 事件动态调整网格列数，确保小屏幕下布局更合理：

   • 模板代码：

     <mat-grid-list [cols]="breakpoint" rowHeight="fit">
       <mat-grid-tile *ngFor="let item of items">
         <!-- 你的网格项内容 -->
       </mat-grid-tile>
     </mat-grid-list>
     

   • 组件类代码：

     breakpoint: number;
     
     ngOnInit() {
       this.setBreakpoint(window.innerWidth);
       window.addEventListener('resize', (event) => {
         this.setBreakpoint((event.target as Window).innerWidth);
       });
     }
     
     private setBreakpoint(width: number) {
       this.breakpoint = width <= 400 ? 1 : width <= 700 ? 2 : 4;
     }
     

内容的提问来源于stack exchange，提问作者user16799749