ipsos-components/src/demo-app/a11y/grid-list/grid-list-a11y.html

Material Design components for Angular

<section>
  <h2>Types of coffee (fix-height grid-list)</h2>
  <mat-grid-list role="list" [cols]="fixedCols" [rowHeight]="fixedRowHeight">
    <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
                  [style.background]="tile.color" role="listitem">
      {{tile.text}}
    </mat-grid-tile>
  </mat-grid-list>
</section>

<section>
  <h2>Types of coffee (ratio-height grid list)</h2>
  <mat-grid-list role="list" cols="2" [rowHeight]="ratio" gutterSize="4px">
    <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'" role="listitem">
      {{tile.text}}
    </mat-grid-tile>
  </mat-grid-list>
</section>

<section>
  <h2>Types of coffee (fit-height grid list)</h2>
  <mat-grid-list role="list" cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
                [style.height]="fitListHeight">
    <mat-grid-tile *ngFor="let tile of tiles" role="listitem" [style.background]="'#F1EBBA'">
      {{tile.text}}
    </mat-grid-tile>
  </mat-grid-list>
</section>

<section>
  <h2>Angular team dogs (Grid list with header and footer)</h2>
  <mat-grid-list role="list" cols="3" rowHeight="200px">
    <mat-grid-tile *ngFor="let dog of dogs" role="listitem">
      <mat-grid-tile-header>{{dog.name}}</mat-grid-tile-header>
      <img alt="Photo of {{dog.name}}"
           src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
      <mat-grid-tile-footer>
        <span mat-line>Human: {{dog.human}}</span>
      </mat-grid-tile-footer>
    </mat-grid-tile>
  </mat-grid-list>
</section>