Learn the Front-end Beta Search

justify-self

Definition

The justify-self CSS property is used in grid layouts to align individual grid items along the horizontal axis within their own grid cell. It allows you to control the horizontal alignment of a specific grid item within its grid cell.

The justify-self property accepts various values to control the horizontal alignment of a grid item:

  • start: The grid item is aligned to the start of its grid cell.
  • end: The grid item is aligned to the end of its grid cell.
  • center: The grid item is centered horizontally within its grid cell.
  • stretch: The grid item is stretched to fill the entire width of its grid cell.
  • baseline: The grid item is aligned based on its baseline.

Here’s an example:

.grid-item {
  justify-self: center;
}

In this example, the .grid-item class sets the horizontal alignment of the specific grid item to center within its grid cell.

You can use other values like start, end, stretch, or baseline to achieve different horizontal alignments for individual grid items within the grid layout.

The justify-self property is useful when you need to control the horizontal alignment of specific grid items within their grid cells, allowing for fine-grained control over the layout and positioning in grid layouts.

Syntax

.card {
  display: grid;
}

.card__cta {
  justify-self: center;
}

justify-self works across flexbox and grid layouts to position tracks or individual items along the main or cross axis.

Values

  • start / end: align content to the logical start or end edge (writing-mode aware).
  • center: center items or tracks along the axis.
  • stretch: expand items to fill the available space when allowed.
  • baseline: line up first baselines for tidy typography.
  • auto: inherit the parent container setting unless overridden.

Practical Examples

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: 2rem;
}

.pricing__cta {
  justify-self: center;
}

Targeted alignment keeps each call-to-action centered without disturbing sibling cards.

HTML

Inherited alignment

Override with justify-self: center

Code
<div class="grid gap-4 sm:grid-cols-2">
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Inherited alignment</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; align-items: start; justify-items: start;">
      <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Default</button>
      <button class="rounded-full bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700">Also start</button>
    </div>
  </div>
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Override with justify-self: center</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; align-items: start; justify-items: start;">
      <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Default</button>
      <button class="rounded-full bg-sky-500 px-4 py-2 text-sm font-semibold text-white" style="justify-self: center;">Centered</button>
    </div>
  </div>
</div>

Tips & Best Practices

  • Align on the container first, then reach for *-self overrides only when a child needs unique treatment.
  • Prefer logical keywords (start, end) over physical directions for better localisation.
  • Combine alignment with gap to manage spacing without extra wrapper elements.
  • Use auto to fall back to the container alignment and reduce redundant declarations.

Accessibility & UX Notes

Predictable alignment lowers cognitive load and lets keyboard users tab through content without unexpected jumps. Maintain visible focus indicators and ensure stretched components still provide generous hit areas.

Browser Support

align-* and justify-* properties are well supported. place-* shorthands require Chrome 59+, Edge 79+, Firefox 66+, Safari 12.1+.

  • gap for consistent spacing between tracks or items.
  • justify-content, align-items, and place-content to coordinate both layout axes.
  • flex-direction and grid-auto-flow influence which axis is treated as main vs. cross.

Related posts