CSS justify-self Property

Definition and Usage

The justify-self property sets how one item is justified inside its alignment container on the inline axis. In grid, that is left–right placement inside the item’s grid area.

Put it on the item, not the container. The default auto follows the container’s justify-items. It is ignored in flexbox and table cells. For the block axis on one item, use align-self.

CSS Syntax

Also valid: left, right, self-start, self-end, baseline, and optional safe / unsafe.

Property Values

How to Use justify-self

Set a container default with justify-items, then override one item when it should sit differently.

1. Build a grid with cells wider than the item content.
2. Optionally set justify-items on the container (for example stretch).
3. Pick the item that should differ.
4. Set justify-self on that item only (center, start, end, …).

Live Preview

Neighbors stretch. The highlighted item alone changes with justify-self.

CSS Examples

Each snippet keeps only what justify-self needs: a grid, stretching siblings, and one override. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    border: 1px solid #ccc;
  }
  .spot {
    justify-self: center;
  }
</style>

<section>
  <div>One</div>
  <div class="spot">Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    border: 1px solid #ccc;
  }
  .spot {
    justify-self: start;
  }
</style>

<section>
  <div>One</div>
  <div class="spot">Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    border: 1px solid #ccc;
  }
  .spot {
    justify-self: end;
  }
</style>

<section>
  <div>One</div>
  <div class="spot">Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

Key Takeaways