CSS justify-items Property
Align each grid item at the end of their grid cell, in the inline direction:
More "Try it Yourself" examples below.
Definition and Usage
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.
Tip: To align grid items in block direction instead of inline direction, use
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the 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.||Demo ❯|
|normal||Dependant on layout context, but similar to 'stretch' for grid layout||Demo ❯|
|stretch||Stretches to fill the grid cell if inline-size (width) is not set.||Demo ❯|
|start||Align items at the start in the inline direction||Demo ❯|
|left||Align items to the left||Demo ❯|
|center||Align items to the center||Demo ❯|
|end||Align items at the end in the inline direction||Demo ❯|
|right||Align items to the right||Demo ❯|
|baseline alignment||The element is aligned with the baseline of the parent.||Demo ❯|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
justify-items vs. justify-self
Alignment is set to 'center' from container, and 'right' on the grid item itself. Property value 'right' prevails:
justify-items on absolutely positioned grid items
Alignment is set to 'right' on absolutely positioned grid items:
writing-mode property value of the grid container element set to vertical-rl, the inline direction is downwards. The result is that the start of the container is moved from left side to top, and the end of the container is moved from right side to bottom:
direction property value of the grid container element set to 'rtl', the inline direction is right to left. The result is that the start of the container is moved from left side to right side, and the end of the container is moved from right side to left side:
CSS tutorial: CSS grid
CSS tutorial: CSS positioning
CSS Reference: align-items property
CSS Reference: direction property
CSS Reference: grid property
CSS Reference: grid-template-columns property
CSS Reference: justify-self property
CSS Reference: position property
CSS Reference: writing-mode property