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

HTML

<div class="grid-container">

   <div>auto (inherits center)</div>

   <div>stretch</div>

   <div>start</div>

   <div>end</div>

   <div>baseline</div>

</div>

CSS

.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;
}

Result