CSS justify-self Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

One
Two
Three

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
Edge Chrome Firefox Opera Safari
1657454410.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
57454310.3657

Last updated by CSSPortal on: 2nd January 2024