В чем разница между align-items и align-content в Grid Layout?

Начнем с уточнения терминологии:

Сетка Контейнер

Контейнер сетки - это общий контейнер для сетки и элементов сетки. Он устанавливает контекст форматирования сетки (в отличие от другого контекста форматирования, такого как гибкий или блочный).

Сетка

Сетка - это группа пересекающихся вертикальных и горизонтальных линий, которые делят пространство контейнера сетки на области сетки, которые представляют собой блоки, содержащие элементы сетки.

Элементы сетки

Элементы сетки - это блоки в контейнере сетки, которые представляют текущий контент (т. Е. Контент, который не позиционируется абсолютно).

Вот иллюстрация из W3C:

Свойства justify-content и align-content выравнивают сетку.

Свойства justify-self, justify-items, align-self и align-items выравнивают элементы сетки.

Что касается проблемы, описанной в вашем вопросе:

Мое замешательство связано с утверждением автора о том, что набор "-content" существует, потому что: "Иногда общий размер вашей сетки может быть меньше, чем размер ее контейнера сетки"

На рисунке видно, что сетка меньше контейнера сетки.

В результате остается пространство, и контейнер может распределить это пространство по вертикальному центру (align-content: center) и выравниванию по правому краю (justify-content: end) сетки.

Дополнительное пространство также может позволить разделить сетку такими значениями, как space-around, space-between и space-evenly.

Однако, если размер сетки равен размеру контейнера, свободного места не будет, и align-content / justify-content не окажут никакого влияния.

Вот еще из спецификации:

10.3. Выравнивание по осям строк: свойства justify-self и justify-items

Элементы сетки можно выровнять во встроенном измерении с помощью свойства justify-self элемента сетки или свойства justify-items контейнера сетки.

10.4. Выравнивание оси столбца: свойства align-self и align-items

Элементы сетки также можно выровнять по измерению блока (перпендикулярно встроенному измерению) с помощью свойства align-self элемента сетки или свойства align-items контейнера сетки.

10.5. Выравнивание сетки: свойства justify-content и align-content

Если внешние края сетки не соответствуют краям содержимого контейнера сетки (например, если нет столбцов гибкого размера), дорожки сетки выравниваются внутри поля содержимого в соответствии со свойствами justify-content и align-content. на сетке контейнера.

^{(курсив добавлен)}