Grid.Item placeSelf prop options inconsistent from standard CSS Grid option

[jocelyn-dunkley]

Describe the bug
According to the Mozilla place-self docs, it's supposed to be a shorthand for alignSelf and justifySelf. So you are supposed to be able to add two options like "end start" or "stretch center". But the Grid.Item only allows for 1 string option like "end". I assume the logic on your end was that if you wanted to have different self values you should use both alignSelf and justifySelf props separately. Like <Grid.Item alignSelf="center" justifySelf="end"> However it seems like you're trying to have the Grid component match the normal CSS grid so this inconsistency is a bit confusing.

To Reproduce

Expected behavior
I can use the placeSelf prop to add max 2 options which will correspond to alignSelf and justifySelf, respectively.

[ddouglasz]

Thanks for reporting.
Yes, the place-self property can combine the align-self and justify-self property. I can make more findings to know if there is a reason why we kept it this way. We will discuss this and see if we are considering the possibility of taking advantage of the place-self property.