place-items: centering, shorthand

Grid's "align both axes" shortcut

.container {
  display: grid;
  place-items: center;       /* center each cell's content horizontally AND vertically */
}

place-items is shorthand for align-items (vertical) + justify-items (horizontal) inside grid cells.

Most-used pattern: dead-center

/* A perfectly centered element, no flex needed */
.center-everything {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

One declaration. The child is centered both ways. Compare to the flexbox version (display: flex; align-items: center; justify-content: center) — equally good, just slightly shorter syntax with grid.

place-content vs place-items

• place-items — how each cell's CHILD is aligned WITHIN its cell.
• place-content — how the GRID itself is aligned within the container (matters when the grid is smaller than the container).

For a grid that fills its container (the common case), place-content doesn't matter.

Per-cell override: place-self

A single grid item can opt out:

.special { place-self: start end; }   /* top-right corner of its cell */