place-items

place-items is shorthand for align-items followed by justify-items. In Grid, it aligns each item along both axes of its area. In Flexbox only the align-items component affects flex items.

Smallest working example

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

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

Each box is centered inside its own 100px-high area. Try start end to put the items at the block start and inline end.

Values and defaults

The first value sets align-items; the second sets justify-items. A single value is used for both. The initial components are normal and legacy; the shorthand is not inherited. Use center, start, end, stretch, or appropriate baseline values.

A practical use

A single-cell grid can center a loading message with place-items: center. Provide enough height to make block-axis centering visible and keep the message accessible as text.

Why it may do nothing

It does not center flex items along the main axis. Fixed item sizes can prevent stretching. place-content moves the whole grid track group instead of individual items.

A second working case

<div class="panel"><p>No practice items yet. Choose a lesson to begin.</p></div>

.panel {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: 1rem;
  background: #eff6ff;
}
p {
  max-width: 24ch;
  text-align: center;
}

The text is an ordinary message, not a loading animation. It can wrap while its box remains centered in the single grid area.

Sources and browser support

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