如何将mat-card适配为mat-grid列表视图，移动端每行2张、平板/PC每行3张

解决方案 #

你可以选择以下两种方案实现需求，推荐使用CSS Grid方案，兼容性更好且无需依赖flex-layout库。

方案1：基于现有flex-layout改造 #

核心是给mat-card增加响应式宽度占比配置，抵消布局间隙带来的宽度偏移：

1. 修改HTML代码如下：

<div class="cardList" fxLayout="row wrap" fxLayoutAlign="flex-start stretch" fxLayoutGap="20px">
    <mat-card 
      fxFlex.xs="calc(50% - 10px)"
      fxFlex.gt-xs="calc(33.333% - 14px)"
      fxFlexAlign="stretch" 
      *ngFor="let member of members" 
      routerLink="/registration/verify-phone"
    >
        <mat-card-header style="flex-direction: column;" fxFlex="60">
            <mat-card-title style="color: #0663fe; font-weight: 600;">{{member.content}}</mat-card-title>
        </mat-card-header>
    </mat-card>
</div>

2. 增加对应样式：

/* 解决默认边距和盒模型冲突问题 */
.cardList {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
}
mat-card {
  box-sizing: border-box;
  margin: 0 !important;
  height: 100%;
}

参数说明：

• fxFlex.xs对应小于600px的移动端视图，设置50%宽度减10px抵消半份间隙，实现每行2张
• fxFlex.gt-xs对应大于等于600px的平板、笔记本视图，设置33.333%宽度减14px抵消间隙，实现每行3张

方案2：原生CSS Grid实现（更推荐） #

无需依赖flex-layout，布局更稳定，自动适配等高需求：

1. HTML简化为：

<div class="cardList">
    <mat-card *ngFor="let member of members" routerLink="/registration/verify-phone">
        <mat-card-header style="flex-direction: column;">
            <mat-card-title style="color: #0663fe; font-weight: 600;">{{member.content}}</mat-card-title>
        </mat-card-header>
    </mat-card>
</div>

2. 增加对应CSS样式：

.cardList {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  gap: 20px;
}
/* 移动端每行2张 */
@media (max-width: 599px) {
  .cardList {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 平板及以上每行3张 */
@media (min-width: 600px) {
  .cardList {
    grid-template-columns: repeat(3, 1fr);
  }
}
mat-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

之前的flex方案失效的核心原因是没有给mat-card设置明确的响应式宽度规则，flex默认会根据内容自适应宽度，无法固定每行展示的卡片数量。

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