justify-items

justify-items sets the default inline-axis alignment for items in a grid container. Each item is aligned inside its own grid area. It has no effect on flex items.

Smallest working example

<div class="layout">
  <div>A</div>
  <div>Longer B</div>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 1rem;
}
/* Optional presentation */
.layout {
  background: #f1f5f9;
  padding: 8px;
}
.layout > div {
  padding: 8px;
  background: #dbeafe;
}

Both boxes sit in the centers of their separate columns. Change center to stretch to fill each area when sizing allows it.

Values and defaults

The initial value is legacy, which handles inherited legacy alignment behavior; in ordinary Grid use it behaves as normal alignment. The property is not inherited. normal, start, end, center, stretch, and baseline values are common choices. normal usually stretches grid items, with exceptions for intrinsic sizes or aspect ratios.

A practical use

Center small badges or icons within a grid of equal-width cells. Override a single cell with justify-self.

Why it may do nothing

It cannot arrange flex items. In Flexbox use justify-content for main-axis distribution. A grid item’s auto inline margins can take precedence, and fixed sizes can prevent stretching. It aligns individual items; it does not move the grid’s columns.

A second working case

<div class="labels">
  <span>Structure</span><span>Layout</span><span>Forms</span
  ><span>Typography</span>
</div>

.labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: start;
  gap: 1rem;
  padding: 1rem;
  background: #eff6ff;
}
.labels span {
  border: 1px solid #2563eb;
  padding: 0.5rem;
}

Each label stays content-sized at its area’s inline start. Change start to stretch to fill the areas, then center to compare content-sized centered labels.

Sources and browser support

MDN: justify-items describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.