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

Put in styles.css:

DEMO

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

This might not fit everyone's needs, but instead of wrestling with the functionality and css properties in order to fit alignment, your component can set the width/height of inner components to 100%. This way, Angular will still get its way (center it all!), and you can adjust the alignment as you see fit (left, right).

Example here with simple checkboxes (my real world scenario), but you can obviously expand on this with whatever your situation is (most complex example is the last one).

https://stackblitz.com/edit/angular-74i5kw