<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?
You can use ::ng-deep
to override the default css of md-grid-tile
.
css:
::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
align-items: initial; /*vertical alignment*/
justify-content: initial; /*horizontal alignment*/
}