Angular Material Grid Layout

I'll give you the basics.

In Angular Material (for Angular 2/4) the most commonly used attributes are:

fxLayout="row | column"
fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time)
fxFlex="number" (can accept numbers from 1 to 100)

You can also use postfix as fxLayout.xs and so on to apply rules only for specific resolution.

For more info you can look through the docs: https://github.com/angular/flex-layout/wiki/API-Documentation

To play around with alignment, you can use the demonstration from Angularjs Material resource (it's totally the same as for Angular Material for Angular 2/4): https://material.angularjs.org/latest/layout/alignment

enter image description here

And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs