CSS justify-self Property

What You’ll Learn

The justify-self property lets you override inline-axis alignment for a single grid item inside its cell. It is the item-level companion to justify-items, useful when one box needs different horizontal placement than its neighbors.

Introduction

The justify-self property in CSS is used to align an individual grid item along the inline (row) axis within its grid area. While justify-items sets the default for every item in the container, justify-self lets one item break that rule.

This is helpful for layouts like a product grid where one featured card is centered in its column while the rest stay start-aligned, or a dashboard tile where a badge sits at the trailing edge of its cell.

Definition and Usage

Apply justify-self to a grid item, not to the grid container. Use it when a single item needs a different inline-axis position than the container’s justify-items value provides.

📝 Syntax

Apply justify-self to a grid item:

.item {
  justify-self: value;
}

Basic Grid Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start;
}

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

Default Value

The default value of justify-self is auto, which means the item follows the alignment set by the container’s justify-items property.

Syntax Rules

• Apply justify-self to the grid item, not the container.
• The default value is auto, which uses the container’s justify-items value.
• Accepted keywords match justify-items: start, end, center, and stretch.
• Alignment is visible when the item is smaller than its grid area along the inline axis.
• Use it sparingly for exceptions; too many overrides can make layouts harder to maintain.

💎 Property Values

justify-self vs justify-items

Examples Gallery

Align three items differently, override a container default, center one highlighted tile, and compare auto with an explicit override.

.item-1 { justify-self: start; }
.item-2 { justify-self: center; }
.item-3 { justify-self: end; }

.grid {
  justify-items: start;
}

.featured {
  justify-self: end;
}

.highlight {
  justify-self: center;
}

.grid {
  justify-items: center;
}

.custom {
  justify-self: start;
}

♿ Accessibility

• Preserve reading order — moving one item visually does not change DOM order for screen readers.
• Support RTL layouts — prefer start and end over hard-coded left/right values.
• Keep touch targets usable — end-aligned badges and buttons still need adequate tap area.
• Test zoom and reflow — centered or edge-aligned items should remain readable at larger text sizes.
• Avoid overusing overrides — too many different alignments in one grid can confuse visual scanning.

💡 Best Practices