将justify-items更改为justify-content，它应该可以工作。
第一个

简短回答：你要的是justify-content而不是justify-items

第一个

详细答案：

网格项目与其所在的空间之间存在差异。
当你定义一个网格时，你只是定义了网格的行/列，称为tracks，而不是实际定义每个元素的位置等。
DOM元素只遵循网格的流动并相应地放置，我们可以使用grid-columngrid-row之类的属性来更改这些元素
你可以这样看：

如您所见，有The Grid container、The Grid、The Columns、The Rows和The Grid items。
Grid项位于两者的交集中，称为The Grid Area（这使得css grid在某些方面优于flexbox）
justify-items对齐该区域内的网格项。
所以grid-template-columns: repeat(3, 1fr);，这意味着3列的宽度是网格的宽度，在它们之间平均分割。

演示版

• 不要看代码，只看预览 *

第一次
正如你所看到的，网格列比网格项100px宽，这意味着有空间来居中，所以justify-items: center;将它们居中。
这就是为什么看起来网格是居中的，但这并不是为什么改变为grid-template-columns: repeat(3, 100px);会破坏它的原因。
对于grid-template-columns: repeat(3, 100px);

演示版

• 不要看代码，只看预览 *

第一个
正如您所看到的，列宽度等于网格项的宽度，因此它们都可以紧密地容纳在列中，而网格仍然是空的。

您可以尝试在这些网格元素的顶部添加flex属性，然后使用justify-content:center;将其居中

• index.html:

<div class="centering_items">
       <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
</div>

• style.css

.centering_items {
    display: flex;
    justify-content: center;
}

.container {
    background-color: #aa96da;
    display: grid;
    grid-gap: 20px;
    grid-template-rows: repeat(3, 1fr);

    /*Only if I change this 100px to '1fr' the justify-items will work */
    grid-template-columns: repeat(3,  100px);
}

.item {
    width: 100px;
    height: 100px;
    background-color: green;
}