Bagaimana untuk mencipta Bahan Sudut senarai mat-grid

Question

Saya cuba mencipta senarai mat-grid menggunakan Bahan Sudut, masalahnya ialah saya tidak nampak apa-apa yang muncul pada halaman

Ini ialah bahagian maklumat komponen saya:

<div class="mat-grid-list"
  <div class="mat-grid-tile"style="grid-lajur: rentang 1; warna latar belakang: lightpink;">
    Tiga
  </div>

  <div class="mat-grid-tile"style="grid-lajur: rentang 0; warna latar belakang: hijau muda;">
    dua
  </div>

  <div class="mat-grid-tile"style="grid-lajur: rentang 3; warna latar belakang: #DDBDF1;>
    Empat
  </div>
</div>

Semuanya dipasang dan diisytiharkan

Answer 1

Anda perlu menggunakan komponen Senarai Grid Bahan Sudut. Bukan sahaja CSS. Sila rujuk contohhttps://material.angular.io/components/grid-list/examples

Answer 2

Sifat lajur grid dan baris grid memerlukan nilai rentang yang sesuai untuk menentukan bilangan lajur atau baris yang perlu diharungi oleh blok grid.

<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>