如何让mat-card精准填充mat-grid-list内的mat-grid-tile容器

你只需要添加对应CSS样式即可实现需求，具体代码如下：

• 方式一：直接给内部mat-card设置宽高适配父容器
  在组件样式文件中加入以下代码：

/* 让卡片宽度高度完全适配父tile容器 */
mat-grid-tile > mat-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}

如果卡片内容超出容器需要滚动，可以额外添加以下样式：

mat-card-content {
  overflow-y: auto;
}

• 方式二：修改mat-grid-tile的默认对齐规则
  默认mat-grid-tile的子元素是居中对齐的，修改对齐规则后子元素会自动拉伸填满容器：

mat-grid-tile {
  align-items: stretch !important;
}

注意：如果你的组件样式用了ViewEncapsulation隔离，需要把样式写到全局styles.scss里，或者加上::ng-deep伪类穿透样式隔离。

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