在您的示例中，没有真实的的区别，因为每个示例中只有一个网格项。但这些实际上有不同的目的。
justify-content和align-content用于将网格容器的整个内容作为一个组对齐。因此，在下面的第一个示例中，所有四个框都位于黑色容器的中心。
justify-items和align-items用于在它们各自的网格单元内对齐各自的网格项。因此，在下面的第二个示例中，每个黄色正方形都位于容器的四分之一范围内。
当容器中只有一个div时，两组属性的结果是相同的，但原因不同。

article.content {
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  justify-content: center;
  align-content: center;
}

article.items {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

article {
  display: grid;
  background: black;
  width: 400px;
  height: 400px;
  gap: 20px;
}

div {
  background: yellow;
  width: 100px;
  height: 100px;
}

<h1>justify-content and justify-items</h1>

<article class="content">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>

<h1>justify-items and align-items</h1>

<article class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>