To answer your questions:

1

As reiallenramos mentioned, “The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property.” – MDN

2-3

This screen shot from W3 does an excellent job of showing what they do and the differences between them.

Good To Knows:

For more information and example, I would suggest you check out:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• https://www.smashingmagazine.com/2017/12/grid-inspector/

And for some inspiration:

• https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/