What is difference between justify-self, justify-items and justify-content in CSS grid?

Question

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

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/