CSS justify-self Property
Description
The justify-self
property aligns the grid layout element inside the cell along the line axis of the grid-container. In order to align the grid layout element inside the cell along the axis of the grid-column column, you can use the align-self property. The justify-self property overrides the alignment value set for the grid container with the justify-items property of a particular element. Currently, if the element is not a layout grid element (not located inside the parent element, which is a block element or a lower-case grid container), then the justify-self property will not have any effect on such an element.
- Initial value
- auto
- Applies to
- Block-level boxes, absolutely-positioned boxes, and grid items
- Inherited
- No
- Computed value
- As specified
- Animatable
- Yes
- JavaScript syntax
- object.style.justifySelf
Interactive Demo
Syntax
justify-self: auto | stretch | center | start | end | baseline
Values
- autoAn element inherits the value of its parent container. If the parent container does not matter, then the value is set as stretch . This is the default value.
- stretchThe item is stretched to fit the column size of the container cell.
- centerThe item is centered on the column of the container cell.
- startThe element is located at the initial edge of the cell.
- endThe element is located at the end edge of the cell.
- baselineThe element is located on its baseline.
Example
<div class="grid-container">
<div>auto (inherits center)</div>
<div>stretch</div>
<div>start</div>
<div>end</div>
<div>baseline</div>
</div>
.grid-container {
display: grid;
grid: auto / repeat(5, 1fr);
grid-gap: 10px;
height: 100px;
background: rgb(0,150,208);
justify-items: center;
text-align: center;
}
.grid-container div {
border: 1px solid;
background: rgb(241,101,41);
}
.grid-container div:nth-of-type(1) {
justify-self: auto;
}
.grid-container div:nth-of-type(2) {
justify-self: stretch;
}
.grid-container div:nth-of-type(3) {
justify-self: start;
}
.grid-container div:nth-of-type(4) {
justify-self: end;
}
.grid-container div:nth-of-type(5) {
justify-self: baseline;
}
Browser Support
The following table will show you the current browser support for the CSS justify-self
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
16 | 57 | 45 | 44 | 10.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
57 | 45 | 43 | 10.3 | 6 | 57 |
Last updated by CSSPortal on: 2nd January 2024