CSS justify-self Property
Align a grid item at the right side of its grid cell:
More "Try it Yourself" examples below.
Definition and Usage
justify-self property aligns a grid item within its grid cell 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 item need available space around itself in the inline direction.
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the property.
|auto||Default value. Grid container justify-self property value is inherited.||Demo ❯|
|normal||Dependant on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves lik 'start'.||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-self vs. justify-items
Alignment is set to 'center' from container with justify-items property, and 'right' on the grid item itself with justify-self property. Property value 'right' prevails:
justify-self 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-content property
CSS Reference: align-items property
CSS Reference: align-self property
CSS Reference: direction property
CSS Reference: grid property
CSS Reference: grid-template-columns property
CSS Reference: position property
CSS Reference: writing-mode property