What do align-items and justify-items do in CSS Grid?

In Grid, align-items controls the vertical position of items inside their cells and justify-items controls the horizontal position.

Each grid item lives inside a cell that is usually bigger than the item itself. These two properties decide where the item sits within that box. (Note the contrast with Flexbox, where justify-content works on the main axis — in Grid the names map cleanly to vertical and horizontal.)

.container {
  display: grid;
  align-items: center;     /* centre every item vertically in its cell */
  justify-items: center;   /* centre every item horizontally in its cell */
}

Per-item override: to position one item differently from the rest, use align-self and justify-self on that individual item.