place-self

place-self is shorthand for align-self followed by justify-self. It positions one grid item inside its area. For a flex item only the align-self component affects alignment.

Smallest working example

<div class="layout">
  <div>Default</div>
  <div class="special">End and center</div>
</div>

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

The second item sits at the bottom and horizontal center of its own area in this writing mode.

Values and defaults

The first value is block or cross alignment; the second is inline alignment. One value applies to both components. Both initial values are auto, taking the corresponding container alignment; the property is not inherited.

A practical use

Position a small action inside a larger grid cell while the other cells retain the container’s place-items setting.

Why it may do nothing

It does not place a grid item into another cell: use grid-column and grid-row for placement. The justify-self part has no effect on flex items. Auto margins can override alignment.

A second working case

<div class="panel">
  <p>Centered default</p>
  <p class="caption">Caption at block end, inline start</p>
</div>

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 10rem;
  place-items: center;
  background: #eff6ff;
}
.caption {
  place-self: end start;
  padding: 0.5rem;
  background: #dbeafe;
}

The caption uses end for align-self and start for justify-self. The other child keeps the container’s center alignment.

Sources and browser support

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