带有可折叠卡片的Angular Flex布局。行问题

Question

我正在使用Angular 8构建功能，其中在扩展卡中显示“模板”（我的对象）列表。 我想每行显示3张扩充卡。

-卡片默认显示为折叠状态 -正确显示所有内容，包括行和列。但是，

当我展开卡片时，卡片会正确展开，但是它下面的所有行都会被推入。

我尝试将fx布局设置为行，将fxlayout xs设置为列，并用flex-wrap包装

<div fxLayout="row" fxLayout.xs="column" class="grid-wrap">
      <app-collapsible-card fxFlex.gt-xs="50%" [fxFlex.gt-md]="100/3" *ngFor="let template of certificatedTemplates">
      </app-collapsible-card>
</div

css：

.grid-wrap{
    flex-wrap: wrap;
}

预期结果将是仅推入我正在扩展的卡下的卡，而不是整个行。

https://imgur.com/a/O9g8iDT

如图所示，当我打开卡3时，卡4和cad 5也被推到底部。这不应该发生。我了解这是由于它们位于另一行而引起的，但是我不确定如何解决此问题。