如何在Angular Material的mat-card组件中创建多列布局？

实现思路 #

要实现mat-card的网格分区布局，可直接基于你现有的Angular Flex Layout逻辑调整，优先用Angular Material自带的mat-divider做区块分隔，比自定义hr样式适配性更强，具体实现方案如下：

1. 按业务逻辑把表单字段划分为不同功能区块，每个区块对应独立的mat-card-content容器
2. 区块之间插入mat-divider实现视觉分割，也可给容器自定义背景、内边距来强化分区效果
3. 按需调整flex布局参数适配列数：双列布局设置两个fxFlex="48%"的同级容器，单列布局直接设置fxFlex="100%"即可

调整后的示例代码 #

<mat-card class="custom">
  <!-- 第一区块：姓名信息 -->
  <mat-card-content class="card-section">
    <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
      <div fxFlex="48%">
        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
          <mat-label>Firstname</mat-label>
          <input matInput>
        </mat-form-field>
      </div>
      <div fxFlex="48%">
        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
          <mat-label>Lastname</mat-label>
          <input matInput>
        </mat-form-field>
      </div>
    </div>
  </mat-card-content>

  <!-- 区块分隔线 -->
  <mat-divider style="margin: 16px 0;"></mat-divider>

  <!-- 第二区块：其他信息 -->
  <mat-card-content class="card-section">
    <div fxLayout="row" fxFlex="100">
      <div fxFlex="48%">
        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
          <mat-label>Firstname</mat-label>
          <input matInput>
        </mat-form-field>
      </div>
      <!-- 要加更多列直接在这里补fxFlex容器即可 -->
    </div>
  </mat-card-content>

  <!-- 要拆更多区块，重复加「mat-divider + mat-card-content」的组合即可 -->
</mat-card>

<style>
.full-width {
  width: 100%;
}
/* 自定义区块样式 */
.card-section {
  padding: 8px 16px;
}
</style>

补充说明 #

如果是Angular 15+版本，官方Flex Layout库已经停止维护，也可以换成原生CSS Grid实现网格分区，灵活性更高：

.custom mat-card-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* 单列的区块单独指定grid-template-columns: 1fr;即可 */

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