CSS justify-items Property

What You’ll Learn

The justify-items property aligns grid items along the inline axis inside each grid cell. It is the grid equivalent of setting horizontal placement for every item at once, without writing rules on each child.

Introduction

The justify-items property in CSS is used to align grid items along the inline (row) axis within their grid area. It affects how each item is positioned horizontally inside its cell when the item is narrower than the cell.

This property is especially useful in responsive grid layouts where you want icons, cards, or buttons centered or aligned to one side inside equal-width columns.

Definition and Usage

Apply justify-items to a grid container, not to individual items. It sets the default inline-axis alignment for all direct grid items inside their assigned grid areas.

📝 Syntax

Apply justify-items to a grid container:

.container {
  justify-items: value;
}

Basic Grid Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 10px;
}

.grid .item {
  width: fit-content;
}

Default Value

The default value of justify-items is stretch, which means grid items expand to fill the entire grid area along the inline axis.

Syntax Rules

• Apply to a grid container, not to individual items (use justify-self for one item).
• Works along the inline axis inside each grid area.
• Alignment is visible when items are smaller than their cell.
• The property is not inherited.
• Pair with align-items for block-axis alignment inside cells.

💎 Property Values

justify-items vs justify-content

Examples Gallery

Center grid cards, align icons to the start, push badges to the end, and compare stretch with centered items.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 10px;
}

.item {
  inline-size: 4.5rem;
}

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

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

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

♿ Accessibility

• Preserve reading order — inline alignment does not change DOM order for assistive technology.
• Keep touch targets large enough — centered icons still need adequate padding for mobile taps.
• Support RTL layouts — start and end follow writing direction, which is safer than hard-coded left/right.
• Maintain contrast — badges aligned to cell edges must still meet color contrast guidelines.
• Test zoom and reflow — centered items should remain usable when text size increases.

💡 Best Practices