如何实现mat-card随mat-grid-tile自适应窗口大小？

问题背景 #

尝试让mat-card随mat-grid-tile自适应尺寸，缩小浏览器窗口时卡片无法适配，最初使用以下CSS未生效：

mat-card {
  width: 100%; 
  height: 100%;
}

后续给mat-grid-list设置固定高度后，缩小窗口的问题有所改善，但放大窗口（如全屏）时卡片显示不全。

解决方案 #

1. 让mat-grid-list自适应父容器高度 #

不要给mat-grid-list设置固定高度，而是让它继承父容器高度，同时确保根容器能占满视口：

/* 确保组件根容器占满整个视口高度 */
:host {
  display: block;
  height: 100vh;
  margin: 0;
}

mat-grid-list {
  height: 100%; /* 让网格列表占满父容器高度 */
}

2. 强制mat-card完全填充mat-grid-tile #

mat-grid-tile默认带有内边距，会导致卡片无法完全填充，同时调整卡片的布局规则：

mat-grid-tile {
  padding: 0 !important; /* 移除tile的默认内边距 */
}

mat-card {
  width: 100%;
  height: 100%;
  margin: 0; /* 移除卡片默认外边距 */
  display: flex;
  flex-direction: column; /* 让卡片内容垂直布局，避免溢出 */
}

/* 处理内容溢出：内容过多时自动显示滚动条 */
mat-card-content {
  flex: 1;
  overflow-y: auto;
}

3. 响应式调整网格列数（可选） #

如果需要在不同窗口尺寸下优化布局，可添加响应式列数逻辑：

<mat-grid-list [cols]="breakpoint" rowHeight="1:1" (window:resize)="onResize($event)">
  <!-- 你的网格瓦片与卡片内容 -->
</mat-grid-list>

组件类中添加对应逻辑：

breakpoint: number;

ngOnInit() {
  this.breakpoint = window.innerWidth <= 600 ? 1 : 3; // 小屏显示1列，大屏显示3列
}

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

以上设置后，无论窗口缩小还是放大，mat-card都会自适应mat-grid-tile的尺寸，内容过多时也会自动出现滚动条，避免显示不全。

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