Angular Material 2 : How to style an md-grid-tile?

Question

 <md-grid-list cols="3" >
  <md-grid-tile style="overflow : scroll;align-items: initial;">

    <app-general style="padding-left : 1em;" ></app-general>

  </md-grid-tile>
  <md-grid-tile class="dummy" style="overflow : scroll;align-items: initial;">
    <app-slab2g style="padding-left : 1em;" > </app-slab2g>

  </md-grid-tile>

  <md-grid-tile style="overflow : scroll;align-items: initial;">
    <app-slab3g style="padding-left : 1em;" > </app-slab3g>


  </md-grid-tile>
</md-grid-list>

How to align items inside the md-grid-tile differently other than its default center alignment?

Answer 1

this is the only reliable solution I found so far. !important didn't work. ::ng-deep messes up main code. If you use div and use absolute in css you can align the div the way you want.

html

<mat-grid-tile *ngFor="let project of projects" 
        [style.background]="project.Color" (click)="openDialog(project)" >
        <div fxLayoutWrap fxLayoutAlign="start center" class="footer">

        </div>
</mat-grid-tile>

css

.footer {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }

Answer 2

To avoid messing with your whole project, use in the component:

HTML:

<mat-grid-tile [colspan]="8" class="script-menu"> </mat-grid-tile>

CSS:

.script-menu >::ng-deep .mat-figure{
    justify-content: flex-start;
}