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
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.justifySelf

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1657454410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757454310.36.0