angular - 带有@angular/flex-layout、@angular/material 和带有图像的mat-card 的响应式网格？

Question

我有一个这样的基本布局:

   Cell 0     Cell 1      Cell 2 <!-- these are not to appear in actual render
 __________________________________
 | Image 0  | Image 1  | Image 2  |
 |----------| Image 1  |-----------
 | text here| Image 1  | text here|
 ----------------------------------
   Cell 3     Cell 4      Cell 5 <!-- these are not to appear in actual render
 __________________________________
 | Image 3  | Image 4  | Image 5  |
 |----------|----------| Image 5  |
 | text here| text here| Image 5  |
 ----------------------------------

根据屏幕大小，每行应该有 4 个单元格、3 个单元格、2 个单元格或 1 个单元格。

图像应占据整个单元格，并与其他单元格中的图像在大小上对齐。

我的一些尝试: https://stackblitz.com/edit/angular-gk58tk

这是网格、垫卡和类似的不常见用例吗？

我究竟做错了什么？

Answer 1

这是一个解决方案，我不知道这是否是您要查找的内容:

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <mat-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card-title>Card 1</mat-card-title>
    <img mat-card-image src="https://kakiseni.org/wp-content/uploads/2018/03/250X250.png" class="image">
    <mat-card-content>Primary card content. Intended for blocks of text</mat-card-content>
    <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
  </mat-card>

  <mat-card>...</mat-card>
</div>

我用过 fxLayout="row wrap"对于卡片列表，根据屏幕的大小，每行有 1 到 4 张卡片。

Stackblitz