Понимание различий между «align-items» и «align-content» в Grid Layout

Модуль Grid Layout представляет два набора свойства «justify/align-items» и «justify/align-content», которые играют разные роли в выравнивании элементов сетки и самой сетки внутри контейнера сетки.

Разъяснение терминологии сетки

• Контейнер сетки: Родительский контейнер, определяющий общее пространство сетки.
• Сетка: Структурированная сетка линий, разделяющая контейнер сетки в области сетки.
• Элементы сетки: Блоки, содержащие входящий контент в областях сетки.

Align-items vs. Align-content

Свойства «align-items» и «align-content», как следует из их названий, выравнивают элементы сетки и саму сетку соответственно. В частности:

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

Рассмотрение претензии автора

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

• Когда сетка меньше контейнера сетки, возникает доступное свободное пространство.
• Свойства justify-content и align-content могут использовать это пространство для выравнивания сетки по центру или иным образом внутри контейнера.
• Напротив, если сетка размер равен размеру контейнера, свободного места нет, и эти свойства выравнивания не имеют никакого эффекта.

Иллюстрации для ясности

[Изображение иллюстрации из W3C показывает сетку меньшего размера, чем ее контейнер, при этом "justify-content" и "align-content" выравнивают сетку внутри контейнера.]

Выдержка из спецификации

Для ясности приводятся соответствующие выдержки из спецификации CSS Grid Layout:

• "Элементы сетки можно выровнять во встроенном измерении, используя свойство justify-self в элементе сетки или свойство justify-items в контейнер сетки."
• "Элементы сетки также можно выровнять по размеру блока, используя свойство align-self для элемента сетки или свойство align-items в контейнере сетки."
• «Если внешние края сетки не соответствуют краям содержимого контейнера сетки, дорожки сетки выравниваются внутри поля содержимого в соответствии со свойствами justify-content и align-content в контейнере сетки».