Html 如何设置网格模板行/列'；属性，以便在没有足够的元素的情况下保持居中？

在我的例子中，它将是关于网格模板列的，也就是说，我假设相同的逻辑将应用于网格模板行

下面是演示：

您将看到，右侧网格元素的剩余空间比左侧网格元素的剩余空间大。 这个例子再现了我在代码中遇到的一个问题，即一张卡片的布局以剩余的两个元素结束，而不是在其他行上的三个元素。 我考虑过一个属性，该属性将网格模板设置为“网格模板列：repeat（max repeat（3），auto）”，与max width允许我们限制宽度并同时定义宽度范围的风格相同

如何确保如果最后一行没有足够的元素完全填充，网格的元素保持居中

下面是ReactJS的代码片段：

 <div className="component">
      <p className="component__introducing-text"> if you look attentively you will see the space is different on the two elements' sides</p>
        <div className="component__grid">
          <div className="component__grid-first-element">
            div 1
          </div>
          <div className="component__grid-second-element">
            div 2
          </div>
        </div>
      </div>

.component__grid-second-element, .component__grid-first-element, .component__introducing-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.component__grid-second-element, .component__grid-first-element {
  height: 40vh;
  width: 25vw;
}

.component__introducing-text {
  margin: 10vh auto 0;
}

.component__grid {
  width: calc(100vw - (100vw - 100%));
  margin-top: 8vh;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-column-gap: 5.5vw;
}

.component__grid-first-element {
  background: pink;
}

.component__grid-second-element {
  background: green;
}

---

那么你会有1，2或3个元素？没有了？谢谢你的回答Temani Afif，在其他情况下可能会更多，因此我现在寻求的基本想法是，如何确保如果最后一行/列中没有足够的元素来满足其内部的重复次数，网格元素保持居中？需要使用Flexbox，CSS网格的设计并不是为了以一种通用的方式涵盖这一点。依赖CSS网格可能会很困难，而使用flexbox则相当容易。flexbox中的一些特性在这里可能会很有趣。谢谢