The CSS align-self property is used to set how an individual grid item positions itself along the column or block axis. By default grid items inherit the value of the align-items property on the container. So if the align-self value is set, it would over-ride the inherited align-items value.

The value start positions grid items on the top of the grid area.

The value end aligns the grid on the bottom of the grid area.

The value center positions grid items on the center of the grid area.

The value stretch positions grid items to fill the grid area (default).