description & Usage
The justify-self property aligns a grid item in a related cell in the inward direction.
For pages with English language, the internal direction is from left to right and the block direction is downwards.
In order to level the justify-self property, they use the grid item in the space around the items.
Note: Use the align-self or align-item properties instead of the internal direction to align the items in the block.
Informations
| # | Description |
|---|---|
| Default Value | auto |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.justifySelf="right" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the justify-self property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| justify-self |
Syntax
Values
| Values | Description |
|---|---|
| auto | By default, the relevant property uses the justify-self values of the Grid container. |
| normal | According to the entered values, the items are placed. |
| stretch | If the size inside a container (its width) is not set, the items will be displayed stretched to fill the interior space. |
| start | Initializes the items in the starting direction. |
| left | It values items in the left direction. |
| center | Values items in the center. |
| end | Values items in the final direction. |
| right | It values items in the right direction. |
| overflow-alignment | |
| baseline alignment | The corresponding property is leveled with the baseline. |
| initial | Adds this value to its default property. |
| inherit | It inherits this value from its parent tag. |
Related Pages
CSS training: CSS grid
CSS tutorial: CSS positioning
CSS reference: align-content property
CSS reference: align-items property
CSS reference: align-self attribute
CSS reference: direction attribute
CSS Reference: The grid property
CSS reference: grid-template-columns property
CSS Reference: The position attribute
CSS Reference: Write mode property
