CSS justify-self Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The justify-self property controls how an individual box is positioned along the inline (row) axis inside its alignment container. In practice this means it governs the horizontal placement of an item in a horizontal writing mode (or the appropriate inline direction in other writing modes) relative to the space of the box that the layout creates for it. It is part of the box-alignment model, so its effect is to move or stretch the item within the available inline space of its grid cell or alignment container rather than changing the ordering or flow of elements.

Because justify-self is an item-level override, it is commonly used to fine-tune the placement of a single grid item when the container has a different default alignment. The container-level setting that establishes default inline alignment for all items is justify-items, and the way free space is distributed across tracks or the whole alignment context is managed by justify-content. When both the container and the item specify alignment, the item-level property takes precedence for that element, allowing granular control inside the broader layout decisions.

The property’s behavior is sensitive to writing direction and the inline axis, so changes in the page’s writing-mode or text direction will change the visual meaning of its alignment. It also interacts with auto margins - using automatic inline margins can produce alignment effects that override or combine with the property’s behavior; see margin for how auto margins behave. In flex formatting contexts, justify-self does not affect flex items the same way it does grid items; for cross-axis adjustments in flexbox you should use align-self. Finally, some alignment choices can cause an item to expand to fill available inline space or to shrink, and when grid tracks are sized automatically that change in item size can influence the track’s computed size.

Definition

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

justify-self: stretch;

justify-self: center;

justify-self: start;

justify-self: end;

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

HTML

<div class="grid-container">

  <div class="grid-item target">I am justified!</div>

  <div class="grid-item">Static Item</div>

  <div class="grid-item">Static Item</div>

  <div class="grid-item">Static Item</div>

</div>

CSS

/* The Parent Container */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 200px;
}

/* Common styling for items */
.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border-radius: 4px;
}

/* The specific property example */
.target {
  background-color: #e74c3c; /* Red to stand out */
  justify-self: center;      /* Options: start, end, center, stretch */
  width: 50%;                /* Reduced width to make the movement visible */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS justify-self property. Hover over a browser icon to see the version that first introduced support for this CSS property.