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.
- Is the
justify-itemsproperty in Flex-box the same as the
justify-itemsproperty in Grid? or are they different somehow? (In other words, can I reuse Flex-box documentation for Grid)
- What do (justify-)content, self and items do?
- 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.