CSS justify-self Property
Example
Align a grid item at the right side of its grid cell:
.red
{
display: grid;
justify-self: right;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The 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.
Tip: To align a grid item in block direction instead of inline direction, use align-self
or align-items
properties.
Default value: | auto |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.justifySelf="right" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS Syntax
justify-self: auto|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;
Property Values
Value | Description | Play it |
---|---|---|
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 ❯ |
overflow-alignment |
|
|
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 |
More Examples
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:
#container
{
display: grid;
justify-items: center;
}
.blue
{
justify-self: right;
}
Try it Yourself »
justify-self on absolutely positioned grid items
Alignment is set to 'right' on absolutely positioned grid items:
#container
{
display: grid;
position: relative;
}
.red
{
position: absolute;
justify-self: right;
}
Try it Yourself »
writing-mode
With the 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:
#container {
display: grid;
writing-mode: vertical-rl;
}
.blue {
justify-self: end;
}
Try it Yourself »
direction
With the 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:
#container {
display: grid;
direction: rtl;
}
.blue {
justify-self: end;
}
Try it Yourself »
Related Pages
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