Implement the "safe" alignment variants

[nicoburns]

Objective

Enable alignment modes that have better behaviour when the contents of the node overflow their container.

Context

Overflow keyword values

The overflow property determines how it will display the contents of the grid when the content exceeds the grid’s boundary limits. So, when the contents are larger than the alignment container, it will result in overflow which might lead to data loss. To prevent this, we can use the safe value which tells browser to change alignment so that there is no data loss.

• safe: The element will behave as though the alignment mode is start if it overflows the containing element.
• unsafe: The element’s alignment value is respected, regardless of the size of the containing element which allows the element to overflow the containing element if its size exceeds the available space.

Source: https://css-tricks.com/almanac/properties/j/justify-self/#aa-overflow-keyword-values

We currently implement the "unsafe" variants which are the default in browsers if safe/unsafe is not specified.

Originally posted by @nicoburns in #549 (comment)