Angular Material Grid Layout
Answer : 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 And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs