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

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

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

Responsive grid with @angular/flex-layout, @angular/material and mat-card with images?

responsive-design

css-grid

angular-material

angular-flex-layout

angular