How to create mat-grid-list Angular Material

Question

I'm trying to create a mat-grid-list using Angular Material, the problem is that I don't see anything appearing on the page

This is my component info-section:

<div class="mat-grid-list" cols="4" rowHeight="100px">
  <div class="mat-grid-tile" style="grid-column: span 1; grid-row: span 2; background-color: lightpink;">
    Three
  </div>

  <div class="mat-grid-tile" style="grid-column: span 0; grid-row: span 0; background-color: lightgreen;">
    Two
  </div>

  <div class="mat-grid-tile" style="grid-column: span 3; grid-row: span 1; background-color: #DDBDF1;">
    Four
  </div>
</div>

Everything is installed and declared

Answer 1

You need to use Angular Material’s Grid List component. Not just CSS. Please refer to the exampleshttps://material.angular.io/components/grid-list/examples

Answer 2

The grid-column and grid-row properties require appropriate span values ​​to determine how many columns or rows a grid block should 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>