Чем отличаются `justify-content`, `justify-items` и `justify-self`?

Оси выравнивания

В Grid (и частично во Flex):

• justify-content — распределение всего набора треков/линий внутри контейнера по inline-оси, когда треки меньше контейнера (space-between, center…).
• justify-items — выравнивание содержимого ячеек (items) по умолчанию внутри своих area по inline-оси (stretch, start, center).
• justify-self — то же для одного item, перекрывает justify-items.

Во Flexbox justify-content — главная ось; justify-items/justify-self для flex не применяются так же (для item — align-self на поперечной).

.grid {
  display: grid;
  justify-content: center;
  justify-items: start;
}
.grid .hero { justify-self: stretch; }