Angular Material 6 grid list align-items and justify-content to flex-start

Question

I'm trying to use Angular Material 6 Dynamic grid-list. The example relating to the documentation puts contents of the grid in the centre of each tile. See example here

I want the content to go in the top left hand corner of each tile.

I have tried the following css which does not work.

.mat-grid-tile .mat-figure {
   justify-content: flex-start;
   align-items: flex-start;
}

Answer 1

Put in styles.css:

DEMO

.mat-grid-tile .mat-figure {
   justify-content: flex-start !important ;
   align-items: flex-start !important;
}