Vertical alignment

Combine mat-grid-list with alignment properties on child blocks to control vertical position inside each tile.

Start
Center
End 
{{'<'}}mat-grid-list cols="3" rowHeight="130" gutterSize="24"{{'>'}}
  {{'<'}}mat-grid-tile{{'>'}}
    {{'<'}}div style="align-self: flex-start"{{'>'}}Start{{'<'}}/div{{'>'}}
  {{'<'}}/mat-grid-tile{{'>'}}
  {{'<'}}mat-grid-tile{{'>'}}
    {{'<'}}div style="align-self: center"{{'>'}}Center{{'<'}}/div{{'>'}}
  {{'<'}}/mat-grid-tile{{'>'}}
  {{'<'}}mat-grid-tile{{'>'}}
    {{'<'}}div style="align-self: flex-end"{{'>'}}End{{'<'}}/div{{'>'}}
  {{'<'}}/mat-grid-tile{{'>'}}
{{'<'}}/mat-grid-list{{'>'}}

Horizontal distribution

To align the whole block horizontally, wrap the grid in a flex container and set justify-content on the wrapper.

1
2
1
2
1
2
3 
{{'<'}}div style="display: flex; justify-content: flex-end"{{'>'}}
  {{'<'}}mat-grid-list cols="2" rowHeight="52" gutterSize="24"{{'>'}}
    {{'<'}}mat-grid-tile{{'>'}}{{'<'}}div{{'>'}}1{{'<'}}/div{{'>'}}{{'<'}}/mat-grid-tile{{'>'}}
    {{'<'}}mat-grid-tile{{'>'}}{{'<'}}div{{'>'}}2{{'<'}}/div{{'>'}}{{'<'}}/mat-grid-tile{{'>'}}
  {{'<'}}/mat-grid-list{{'>'}}
{{'<'}}/div{{'>'}}