我已经阅读了A complete guide to Grid，但仍然对两组容器属性之间的差异感到困惑，即“justify/align-items”与“justify/align-content”。
我的困惑围绕着作者声称存在“-content”集合是因为
有时您的网格的总大小可能小于 它的网格容器
我认为这适用于两者，而不是“-content”集所独有的。
有人可以帮忙解释一下吗？最好使用一些图形说明作为例子。
【问题讨论】：
让我们从澄清术语开始：
网格容器是网格和网格项的整体容器。它建立了网格格式化上下文（相对于另一个格式化上下文，例如 flex 或 block）。
网格是一组相交的垂直和水平线，将网格容器的空间划分为网格区域，这些区域是包含网格项的框。
网格项是网格容器中的框，表示流入内容（即非绝对定位的内容）。
这是来自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. Row-axis Alignment: the
justify-selfandjustify-itemsproperties网格项可以通过使用 网格项目上的
justify-self属性或justify-items属性 在网格容器上。10.4. Column-axis Alignment: the
align-selfandalign-itemsproperties网格项也可以在块维度上对齐（垂直 到内联维度）通过使用
align-self属性 网格容器上的网格项或align-items属性。10.5. Aligning the Grid: the
justify-contentandalign-contentproperties如果网格的外边缘不对应网格容器的 内容边缘（例如，如果没有列是 flex 大小的），网格 轨道在内容框内根据
justify-content和align-content网格上的属性 容器。（强调）
【讨论】：
justify-items / align-items（在容器上）和justify-self / align-self（在项目上（覆盖容器上的设置）），您正在对齐grid item 在网格容器中。要对齐网格项内的内容，您可以将每个项设为 flex 容器，并将 flex 属性应用于内容。
align-content 和justify-content，您可以在容器的额外空间内对齐网格行和列（如果有）。这是一个你可以玩的演示：jsfiddle.net/k5ebsac2