Angular 角材料卡片不'；不要填满整行

对于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;
}

{{photo.title}
{{照片.字幕}
{{photo.content}

垫卡{
最大宽度：410像素；
保证金：1rem；
}

试试这个：

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

---

解决此问题的一个简单方法是在

垫卡的
*ngFor
循环周围放置一个
.card wrapper
div（因此您不必与棱角材质的默认样式作斗争），并提供一些样式。我选择了
display:grid
而不是
flex
，因为它可以更好地控制如何显示数据

.card包装器{
显示：网格；
网格模板列：重复（2，1fr）；
差距：1勒姆；
}

网格模板列：重复（2，1fr）显示每行的项目数量（2），它将重复这些行，直到显示所有项目<代码>间隙
设置网格项之间的间距。在MDN上阅读更多专栏和文章

请参阅基于上述样式的内容显示方式。
这对我来说很有效，谢谢，非常感谢。是的，看起来棱角材质有一些很难定制的默认样式（对于像我这样的初学者）。