Angular Material Cards 不会填满整行

Question

Angular Material 的新手，试图用一些有照片的卡片制作一个页面，但似乎 mat-card 的默认布局是它们垂直堆叠并且不填充右侧行中的空间。我试过用大约六种 flex 布局将卡片包装在一个 div 中，但都没有任何效果。

<mat-card
  *ngFor="let photo of photos_brazil">
  <mat-card-header>
    <mat-card-title>{{photo.title}}</mat-card-title>
    <mat-card-subtitle>{{photo.subTitle}}</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="{{photo.img_source_small}}" alt="{{photo.alt}}">
  <mat-card-content>
    <p>{{photo.content}}</p>
  </mat-card-content>
</mat-card>


mat-card {
  max-width: 410px;
  margin: 1rem;
}

Answer 1

试试这个：

mat-card {
  width: calc(100% - 70px);
  height: calc(100% - 70px);
}

Answer 2

解决这个问题的一个简单方法是在mat-card 的*ngFor 循环周围放置一个.card-wrapper div（这样您就不必与Angular Material 的默认样式作斗争）并赋予它一些样式。我选择了display: grid 而不是flex，因为它可以更好地控制如何呈现您的数据。

.card-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

grid-template-columns: repeat(2, 1fr); 显示每行的项目数量 (2)，它将重复行，直到显示所有项目。 gap 正在设置网格项之间的空间。在 MDN 阅读更多 about grid-template 专栏和 gap。

请参阅this simple example on StackBlitz，了解如何根据上述样式显示内容。