This is box A.
align-self: stretch
  This is box B.
align-self: end
  This is box C.
align-self: start
  This is box D.
align-self: center
  Each of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row). So each covers the same size area as box A.
The align-self property is used to align the content inside the grid-area.