CSS justify-items Property

Definition and Usage

The justify-items property sets the default justify-self for items in a box. In grid, it aligns each item along the inline axis inside its grid area (left–right in a horizontal writing mode).

Put it on the container, not on each item. It is ignored in flexbox and table cells. To move the whole set of tracks inside a wider container, use justify-content. To override one item, use justify-self.

CSS Syntax

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

Property Values

How to Use justify-items

Build a grid with cells larger than the item content, then choose how items sit inside those cells.

1. Set display: grid on the container.
2. Give tracks enough size so cells are wider than the content (for example 1fr 1fr).
3. Leave item width as auto so stretch can grow them, or let content size them for center / start / end.
4. Set justify-items on the container. Override one cell with justify-self if needed.

Live Preview

A 2×2 grid. Change justify-items and watch how each label sits inside its cell.

CSS Examples

Each snippet keeps only what justify-items needs: a grid and cells wider than the labels. Use Try It Yourself for a live editor.

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

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

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

<section>
  <div>One</div>
  <div>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;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

Key Takeaways