So erstellen Sie ein eckiges Mat-Grid-List-Material

Question

Ich versuche, eine Mat-Grid-Liste mit Angular Material zu erstellen. Das Problem ist, dass auf der Seite nichts angezeigt wird

Dies ist mein Komponenten-Infobereich:

<div class="mat-grid-list"
  "div class="mat-grid-tile"
    Drei
  </div>

  "div class="mat-grid-tile"
    Zwei
  </div>

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

Alles ist installiert und deklariert

Answer 1

您需要使用Angular Material的网格列表组件。不仅仅是CSS。 请参考示例https://material.angular.io/components/grid-list/examples

Answer 2

grid-column和grid-row属性需要适当的span值来确定一个网格块应该跨越多少列或行。

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