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
X	16	57	45	44	10.1
Tablets / Mobile
57	57	45	43	10.3	6.0