网格布局中的 align-items 与 align-content 有什么区别？
What is the difference between align-items vs. align-content in Grid Layout?
我通读了 A complete guide to Grid，但仍然对两组容器属性之间的差异感到困惑，即“justify/align-items”与“justify/align-content”。
我的困惑围绕着作者所说的“-content”集合之所以存在是因为
Sometimes the total size of your grid might be less than the size of
its grid container
我认为这对两者都适用，而不是“-content”集所特有的。
谁能帮忙解释一下？最好使用一些图形说明作为示例。
让我们从澄清术语开始：
网格容器
网格容器是网格和网格项的整体容器。它建立了 网格格式化上下文 （相对于其他格式化上下文，例如 flex 或 block）。
网格
网格是一组垂直和水平相交的线，将网格容器的space划分为网格区域，这些区域是包含网格项的框。
网格项目
网格项是网格容器中的框，表示流入的内容（即未绝对定位的内容）。
这是来自 W3C 的插图：
justify-content 和 align-content 属性 对齐网格。
justify-self、justify-items、align-self 和 align-items 属性 对齐网格项。
关于您问题中描述的问题：
My confusion revolves around the claim made by the author that the "-content" set are there because: "Sometimes the total size of your grid might be less than the size of its grid container"
嗯，你可以在插图中看到网格比网格容器小。
因此，还有 space 剩余并且容器能够将此 space 分配到垂直居中 (align-content: center) 和右对齐 (justify-content: end ) 网格。
额外的 space 还可以让网格与 space-around、space-between 和 space-evenly 等值分开 spaced。
但是，如果网格大小等于容器大小，则不会有空闲 space，并且 align-content / justify-content 将无效。
这里是规范的更多内容：
10.3. Row-axis Alignment: the justify-self and justify-items
properties
Grid items can be aligned in the inline dimension by using the
justify-self property on the grid item or justify-items property
on the grid container.
10.4. Column-axis Alignment: the align-self and align-items
properties
Grid items can also be aligned in the block dimension (perpendicular
to the inline dimension) by using the align-self property on the
grid item or align-items property on the grid container.
10.5. Aligning the Grid: the justify-content and align-content
properties
If the grid’s outer edges do not correspond to the grid container’s
content edges (for example, if no columns are flex-sized), the grid
tracks are aligned within the content box according to the
justify-content and align-content properties on the grid
container.
(emphasis added)
我通读了 A complete guide to Grid，但仍然对两组容器属性之间的差异感到困惑，即“justify/align-items”与“justify/align-content”。
我的困惑围绕着作者所说的“-content”集合之所以存在是因为
Sometimes the total size of your grid might be less than the size of its grid container
我认为这对两者都适用，而不是“-content”集所特有的。
谁能帮忙解释一下？最好使用一些图形说明作为示例。
让我们从澄清术语开始：
网格容器
网格容器是网格和网格项的整体容器。它建立了 网格格式化上下文 （相对于其他格式化上下文，例如 flex 或 block）。
网格
网格是一组垂直和水平相交的线，将网格容器的space划分为网格区域，这些区域是包含网格项的框。
网格项目
网格项是网格容器中的框，表示流入的内容（即未绝对定位的内容）。
这是来自 W3C 的插图：
justify-content 和 align-content 属性 对齐网格。
justify-self、justify-items、align-self 和 align-items 属性 对齐网格项。
关于您问题中描述的问题：
My confusion revolves around the claim made by the author that the "
-content" set are there because: "Sometimes the total size of your grid might be less than the size of its grid container"
嗯，你可以在插图中看到网格比网格容器小。
因此，还有 space 剩余并且容器能够将此 space 分配到垂直居中 (align-content: center) 和右对齐 (justify-content: end ) 网格。
额外的 space 还可以让网格与 space-around、space-between 和 space-evenly 等值分开 spaced。
但是，如果网格大小等于容器大小，则不会有空闲 space，并且 align-content / justify-content 将无效。
这里是规范的更多内容：
10.3. Row-axis Alignment: the
justify-selfandjustify-itemspropertiesGrid items can be aligned in the inline dimension by using the
justify-selfproperty on the grid item orjustify-itemsproperty on the grid container.10.4. Column-axis Alignment: the
align-selfandalign-itemspropertiesGrid items can also be aligned in the block dimension (perpendicular to the inline dimension) by using the
align-selfproperty on the grid item oralign-itemsproperty on the grid container.10.5. Aligning the Grid: the
justify-contentandalign-contentpropertiesIf the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the
justify-contentandalign-contentproperties on the grid container.(emphasis added)