justifyitems

justify-items is a CSS property that defines how grid items are aligned inside their assigned grid areas along the inline (horizontal) axis. It is part of the CSS Grid Layout module and applies to grid containers. The property determines the default alignment for all grid items within the grid cells and does not affect items in non-grid layouts such as Flexbox.

Possible values are stretch, start, end, and center. Stretch (the default) makes items fill the entire inline width of their grid areas. Start and end align items toward the start or end edge of the grid area, while center centers them within the area. The values respond to the writing mode; for example, in right-to-left layouts the inline start is the right edge. More complex placements can be achieved by using per-item overrides with the justify-self property.

In practice, justify-items sets a default alignment for grid items; individual items can override it by applying justify-self on the item itself.

The justify-items property can be used in combination with the align-items property to control both axes of item alignment within grid cells. As a shorthand, the place-items property can set both align-items and justify-items simultaneously.