place-content

place-content is shorthand for align-content followed by justify-content. The order is fixed. In Grid, the first value aligns the row group on the block axis; the second aligns the column group on the inline axis.

Smallest working example

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

.layout {
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  height: 180px;
  place-content: center end;
  gap: 8px;
}
/* Optional presentation */
.layout {
  border: 1px solid #64748b;
}
.layout > div {
  background: #dbeafe;
  padding: 8px;
}

The rows are centered vertically and the column group sits at the inline end. Change the declaration to center to center the group along both axes.

Values and defaults

With one value, the second usually takes the first value too; a single baseline value gives the second component start. The initial longhand values are both normal, and neither is inherited. Each component must be valid for its own longhand. For example, the second component cannot use baseline alignment.

A practical use

Center a compact icon grid inside a larger panel. Use content-sized tracks so there is room to move the group.

Why it may do nothing

It is content alignment, not item alignment. A nowrap flex container cannot show an align-content effect. Tracks that occupy all available room have no free space to distribute. Use place-items to align each grid child.

A second working case

<div class="panel">
  <span>HTML</span><span>CSS</span><span>Text</span><span>Forms</span>
</div>

.panel {
  display: grid;
  grid-template-columns: repeat(2, 4rem);
  grid-auto-rows: 3rem;
  place-content: center;
  min-height: 12rem;
  gap: 0.5rem;
  border: 1px solid #64748b;
}
.panel span {
  display: grid;
  place-items: center;
  background: #dbeafe;
}

The fixed tracks occupy less than the panel, so place-content centers the group. The separate place-items rule centers text inside each tile.

Sources and browser support

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