Comment créer un matériau angulaire mat-grid-list

Question

J'essaie de créer une liste de grilles de tapis en utilisant Angular Material, le problème est que je ne vois rien apparaître sur la page

Voici la section d'informations sur mes composants :

<div class="mat-grid-list" cols="4" rowHeight="100px">
  <div class="mat-grid-tile" style="grille-colonne : travée 1 ; ligne-grille : travée 2 ; couleur d'arrière-plan : rose clair ; »>
    Trois
  </div>

  <div class="mat-grid-tile" style="grid-column: span 0;
    Deux
  </div>

  <div class="mat-grid-tile" style="grille-colonne : travée 3 ; travée 1 ;
    Quatre
  </div>
</div>

Tout est installé et déclaré

Answer 1

Vous devez utiliser le composant Grid List d'Angular Material. Pas seulement CSS. Veuillez vous référer aux exempleshttps://material.angular.io/components/grid-list/examples

Answer 2

Les propriétés de colonne de grille et de ligne de grille nécessitent des valeurs d'étendue appropriées pour déterminer le nombre de colonnes ou de lignes qu'un bloc de grille doit couvrir.

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile colspan="1" rowspan="2" style="background-color: lightpink;">
    Three
  </mat-grid-tile>

  <mat-grid-tile colspan="1" rowspan="2" style="background-color: lightgreen;">
    Two
  </mat-grid-tile>

  <mat-grid-tile colspan="3" rowspan="1" style="background-color: #DDBDF1;">
    Four
  </mat-grid-tile>
</mat-grid-list>