Understanding justify-self, justify-items and justify-content in CSS Grid

Your confusion regarding the similarities and differences between these three properties is understandable, as documentation often focuses on Flex-box rather than Grid. To clarify:

1. Relationship between Flex-box and Grid Properties

The justify-self and justify-items properties are not implemented in Flex-box. This distinction stems from Flex-box's one-dimensional nature, which makes justifying a single item impossible. Therefore, Flex-box relies on the justify-content property for alignment along the main axis.

2. Roles of justify-self, justify-items, and justify-content

• justify-content: Aligns the entire grid along the row axis. This property controls the spacing between grid items in the horizontal direction.
• justify-items: Aligns the content inside individual grid items along the row axis. It affects the alignment of content within the grid cells.
• justify-self: Aligns the current grid item within its parent grid cell along the row axis. This property individually adjusts the alignment of specific grid items.

3. Key Differences

The following visual aid provides a clear demonstration of the distinctions among these properties:

[Image of grid layout with different alignments of content, grid items, and the grid itself]

Additional Resources

For further insights, refer to the following articles:

• 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/