Как настроить свойства grid-template-rows / columns так, чтобы при отсутствии нужного элемента центрирование оставалось?

Question

В моем случае речь идет о столбцах-шаблонах-сетках, в которых говорится, что я предполагаю, что те же логики c будут применяться к строкам-шаблонам-сеткам.

Здесь демонстрация: https://stackblitz.com/edit/react-rvxhzc?file=style.scss

Вы увидите, что у элемента сетки справа больше места, чем у элемента сетки слева. В этом случае в моем коде возникла проблема, когда макет карты заканчивается двумя оставшимися элементами вместо трех в других строках. Я думал о свойстве, которое установило бы шаблон сетки как «grid-template-columns: 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>

Здесь фрагмент скомпилированного Sass:

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