显示 material angular 卡片 css

Question

我使用 angular cli 6 和 angular material 2.

我想将卡片的数量限制为大号每行 8 张，中号 4 号，小号 1 号，但我不知道如何处理 css。这是我的模板。

有很多例子，但我不太理解....

你也知道css和angular material的好教程吗 2.非常感谢？

//html

<div class="grid">
<ng-container  *ngFor="let referentielToDisplay  of referentielsToDisplay | async" >

  <mat-card *ngIf="toppings.value.includes(referentielToDisplay.speSS)">
        <mat-card-title-group>
          <img mat-card-image    src="{{ referentielToDisplay?.url }}" alt="SNFGEu" >
          <mat-card-title><h5>{{ referentielToDisplay?.nomSS }}</h5></mat-card-title>
          <mat-card-subtitle *ngIf="referentielToDisplay?.nomSS2">{{ referentielToDisplay?.nomSS2 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p>{{ referentielToDisplay?.descriptionSS }}</p>
        </mat-card-content>
        <mat-card-actions>
     <a target="_blank" href="{{ referentielToDisplay?.webSS }}">Accès web</a>
        </mat-card-actions>
      </mat-card>

</ng-container>
</div>

//CSS

.grid {
     display: flex;
    }

    mat-card {
      width: 400px;
      margin: 15px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
    }

    @media only screen and (max-width: 768px) {
      mat-card {
        margin: 15px 0 !important;
      }
    }
    mat-card:hover {
      box-shadow: 3px 3px 16px -2px rgba(0, 0, 0, .5);
    }
    mat-card-title {
      margin-right: 5px;

    }
    mat-card-title-group {
      margin: 0;
    }

    img {
   width:70px;
   height :70px;

    margin-left: 5px;
    }

    span {
      display: inline-block;
      font-size: 13px;
    }

Answer 1

为了避免不一致，您可以使用 bootstrap 4 或 Angular Flex Layout 的网格系统。

Answer 2

最后，我用了 bootstrap :

<div  class="row no-gutter">
  <ng-container *ngFor="let referentielToDisplay  of referentielsToDisplay | async">
      <ng-container  *ngIf="toppings.value.includes(referentielToDisplay.speSS)">
  <div class="col"  >
  <mat-card>
        <mat-card-title-group>
          <img mat-card-image    src="{{ referentielToDisplay?.url }}" alt="SNFGEu" >
          <mat-card-title><h5>{{ referentielToDisplay?.nomSS }}</h5></mat-card-title>
          <mat-card-subtitle *ngIf="referentielToDisplay?.nomSS2">{{ referentielToDisplay?.nomSS2 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p>{{ referentielToDisplay?.descriptionSS }}</p>
        </mat-card-content>
        <mat-card-actions>
     <a target="_blank" href="{{ referentielToDisplay?.webSS }}">Accès web</a>
        </mat-card-actions>
      </mat-card>
      </div>
    </ng-container> 
       </ng-container>

</div>

显示 material angular 卡片 css

Display material angular cards css

css

angular-material2

angular