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

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

After much blood and tears, I was able to style the first column of an angular material grid without affecting other grids on the page. The below style will left align and center vertically the Persons Name only in this <mat-grid-list>.

Angular material grid:

<mat-grid-list cols="4" rowHeight="4:1">
    <mat-grid-tile colspan="2">
        <div class="leftVerticalAlign">
        Persons Name
        </div>
    </mat-grid-tile>
    <mat-grid-tile>Persons Phone</mat-grid-tile>
    <mat-grid-tile [style.border-left]="'12px solid gray'">Persons Email</mat-grid-tile>
</mat-grid-list>

The elusive CSS:

.leftVerticalAlign {
    left: 1em;    
    position: absolute;  
    top: 50%;
    transform: translate(0px, -50%);
    margin: 0;
}

I threw an extra border-left style in there as another way to apply styles, but it's limited to what it can style I've noticed.

For more info about aligning horizontally and vertically check out w3schools

They saved my life on this one.

html

<mat-grid-tile class="title-tem">
  <div class="item-content">
    hi
  </div>
</mat-grid-tile>

css

 .title-tem >::ng-deep .mat-figure{
  align-items: flex-start;
  justify-content: flex-start;
}

that will be work :)

::ng-deep is deprecated, don't use it.
based on Customizing Angular Material component styles, by default, you cannot override the styles affect elements that are children of other components within your template.
One practice is:

.your-component .mat-grid-tile .mat-figure {
  justify-content: flex-start;
}