Overflow alignment Values
Used with the optional positional alignment value.
safe <right | left | center >: If the item is too big for its container, the alignment will change tostartto make sure you can still see all of the content.
Syntax:
justify-items: safe <right | left | center>;
unsafe <right | left | center>: The alignment you chose (right, left, center) stays the same, even if the item gets cut off because it overflows its container.
Syntax:
justify-items: unsafe <right | left | center>;
CSS justify-items Property
The `justify-items` property in CSS is important for aligning items within a grid container along the inline (row) axis. It allows you to control the alignment of grid items in a grid container when they do not explicitly position themselves using grid-area or similar properties.
Similar to `align-items` property for flex containers, justify-items enables you to align grid items horizontally within their grid areas.
Syntax:
justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] |
legacy | positional alignment | Initial | inherit | inherit
Now, let’s understand each of the property values: