Align All Items Horizontally using justify-items
The justify-items property is set on the grid container to give child elements (grid items) alignment in the inline direction. For pages in English, inline direction is left to right and block direction is downward. For this property to have any alignment effect, the grid items need available space around themselves in the inline direction. To align grid items in block direction instead of inline direction, use align-items property.
Legacy - Default value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute.
Normal - Dependant on layout context, but similar to 'stretch' for grid layout.
Stretch - Dependant on layout context, but similar to 'stretch' for grid layout.
Start - Align items at the start in the inline direction.
Left - Align items to the left.
Center - Align items to the center.
End - Align items at the end in the inline direction.
Right - Align items to the right.