css3 - The difference between justify-self, justify-items and justify-content in CSS Grid

I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box is to grid.

So, I've tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/, which defines them as follows:

justify-items - Aligns the content inside a grid item along the row axis

justify-content - This property aligns the grid along the row axis

justify-self - Aligns the content inside a grid item along the row axis

But I still don't understand what the difference between them is. So, I have 3 questions I want to clarify.

1. Is the justify-items property in Flex-box the same as the
   justify-items property in Grid? or are they different somehow?
   (In other words, can I reuse Flex-box documentation for Grid)


2. What do (justify-)content, self and items do?


3. How are (justify-)content, self and items different?

Any clarification would be greatly appreciated.

Edit: Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.

Answer

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.

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

And for some inspiration: