Центрировать CSS-сетку, когда элементов меньше, чем столбцов

Question

Допустим, у меня есть простая сетка, которая помещает элементы в 4 столбца, заполняя всю ширину контейнера:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  justify-content: center;
}

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

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Это прекрасно работает, пока у меня не будет 3 или менее предметов. Они помещаются в соответствующие ячейки, но поскольку правые ячейки пусты, визуально сетка начинает выглядеть «выровненной по левому краю». Это не круто, если сам контейнер находится по центру страницы.

Как отцентрировать сетку, если в ней 3 или менее элементов? Я пытался использовать repeat(auto-fit, 25%), но он не учитывает grid-gap. repeat(auto-fit, minmax(25%, 1fr)) растягивает содержимое вместо центрирования.