Justify Content utilities control how flex and grid items are positioned along the main axis (horizontal for flex-row). These map to the CSS justify-content property.

Available utilities:

• justify-normal – Default position
• justify-start – Items at the start
• justify-end – Items at the end
• justify-center – Items centered
• justify-between – Space between items
• justify-around – Space around items
• justify-evenly – Space evenly distributed
• justify-stretch – Items stretch to fill

Justify Items utilities control how grid items are aligned along the inline (horizontal) axis within their grid area. This maps to the CSS justify-items property.

Available utilities:

• justify-items-start – Items aligned to start of their cell
• justify-items-end – Items aligned to end of their cell
• justify-items-center – Items centered in their cell
• justify-items-stretch – Items stretch to fill their cell (default)

Justify Self utilities control how an individual grid item is aligned along the inline (horizontal) axis within its grid area. This overrides the justify-items set on the parent.

Available utilities:

• justify-self-auto – Inherits from parent
• justify-self-start – Align to start of cell
• justify-self-end – Align to end of cell
• justify-self-center – Center in cell
• justify-self-stretch – Stretch to fill cell