<md-card>
  <md-card-title>Grid List</md-card-title>
  <md-card-subtitle>md-grid-list is an alternative list view that arranges cells into grid-based layout.</md-card-subtitle>
  <md-tab-group>
    <md-tab>
      <template md-tab-label>Fixed height</template>
      <md-card-content>
        <md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
          <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
                        [style.background]="tile.color">
            {{tile.text}}
          </md-grid-tile>
        </md-grid-list>
        <div  fxLayout="row"  fxLayoutAlign="start center" class="mt-2">
          <md-input placeholder="Change list cols" type="number" [(ngModel)]="fixedCols"></md-input>
          <md-input placeholder="Change row height" type="number" [(ngModel)]="fixedRowHeight"></md-input>
        </div>
      </md-card-content>
      <hr>
      <md-card-actions>
        <button md-button (click)="addTileCols()" color="primary">ADD COLSPAN (THREE)</button>
      </md-card-actions>
    </md-tab>
    <md-tab>
      <template md-tab-label>Ratio height</template>
      <md-card-content>
        <md-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
          <md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
            {{tile.text}}
          </md-grid-tile>
        </md-grid-list>
        <div  fxLayout="row"  fxLayoutAlign="start center" class="mt-2">
          <md-input placeholder="Change ratio" [(ngModel)]="ratio"></md-input>
        </div>
      </md-card-content>
    </md-tab>
    <md-tab>
      <template md-tab-label>Fit height</template>
      <md-card-content>
        <md-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
                      [style.height]="fitListHeight">
          <md-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
            {{tile.text}}
          </md-grid-tile>
        </md-grid-list>
        <div   fxLayout="row"  fxLayoutAlign="start center" class="mt-2">
          <md-input placeholder="Change list height" [(ngModel)]="fitListHeight"></md-input>
          <md-input placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter"></md-input>
        </div>
      </md-card-content>
    </md-tab>
    <md-tab>
      <template md-tab-label>Headers</template>
      <md-card-content class="pa-0">
        <md-grid-list cols="3" rowHeight="200px">
          <md-grid-tile *ngFor="let dog of dogs" style="background:gray">
            <md-grid-tile-header>
              <md-icon md-grid-avatar>info_outline</md-icon>
              {{dog.name}}
            </md-grid-tile-header>
          </md-grid-tile>
        </md-grid-list>
      </md-card-content>
    </md-tab>
    <md-tab>
      <template md-tab-label>Footers</template>
      <md-card-content class="pa-0">
        <md-grid-list cols="3" rowHeight="200px">
          <md-grid-tile *ngFor="let dog of dogs">
            <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
            <md-grid-tile-footer>
              <h3 md-line>{{dog.name}}</h3>
              <span md-line>Human: {{dog.human}}</span>
              <md-icon>star_border</md-icon>
            </md-grid-tile-footer>
          </md-grid-tile>
        </md-grid-list>
      </md-card-content>
    </md-tab>
  </md-tab-group>
</md-card>
