justify-self

justify-self sets an individual grid item’s inline-axis alignment. In horizontal writing it commonly controls where the item sits horizontally within its grid area. It is ignored for flex items.

Smallest working example

<div class="layout">
  <div>Normal alignment</div>
  <div class="special">At the end</div>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.special {
  justify-self: end;
}
/* Optional presentation */
.layout {
  background: #f1f5f9;
  padding: 8px;
}
.layout > div {
  padding: 8px;
  background: #dbeafe;
}

The second item is content-sized and sits at the end of its area. Change end to center or stretch.

Values and defaults

The initial value is auto, which uses the container’s justify-items behavior; it is not inherited. start, end, center, stretch, baseline alignment, and safe center provide overrides.

A practical use

In a two-column form, keep labels at the start and position a help icon at the end of its cell. Preserve a sensible source order.

Why it may do nothing

Flexbox has no main-axis self-alignment equivalent through this property. Use an auto margin or justify-content there. Auto margins in the grid area’s inline direction can also override the alignment.

A second working case

<div class="row">
  <span>Workshop credits</span><span class="total">12</span>
</div>

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  background: #eff6ff;
  padding: 1rem;
}
.total {
  justify-self: end;
  font-weight: 700;
}

The total moves to the end of its own area. It does not move to another column, and the label keeps the default start alignment.

Sources and browser support

MDN: justify-self describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.