What's difference between these two css of grid to center align inner box

I have written two snippets using a CSS grid to center align the inner box but am not able to understand the difference.

I know we have other ways to do but am curious to know the exact difference between these two.

Which one is more appropriate/correct and why

First

justify-content: center;
align-content: center;

Second

justify-items: center;
align-items: center;

HTML

<div class="box1">
  <div>Box1</div>
</div>
<div class="box2">
 <div>Box2</div>
</div>

CSS

 .box1, .box2 {
  border: 5px solid lightgreen;
  height: 250px;
  width: 250px;
  display: grid;
  justify-content: center;
  align-content: center;
  margin: 5px;
}
.box2 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.box1>div, .box2>div {
  background: lightgreen;
  padding: 20px;
}

Output

In your examples, there's no real difference, because you only have one grid item in each. But these actually have different purposes.

justify-content and align-content are for aligning the entire contents of the grid container, as a group. So in the first example below, all four boxes are centered within the black container.

justify-items and align-items are for aligning the individual grid items within their individual grid cells. So in the second example below, each yellow square is centered within its own quarter of the container.

When you have just one div in the container, the result is the same for both sets of properties, but for different reasons.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->