Какие есть способы горизонтально выровнять по центру grid элементы?

Question

[System Shock]

Здравствуйте.
Есть сетка из 5 grid элементов, каждый из которых занимает 1/5 ширины родителя:

<div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

Допустим, с бэка пришло не 5 элементов, а меньше, например 3.
Хотелось бы иметь возможность расположить эти элементы по центру родителя, либо растянуть их по ширине.
Но здесь не будут работать свойства justify-content: center и justify-content: space-between.

Есть ли какой-то способ все-таки сделать выравнивание по центру/по ширине, когда элементов меньше, чем рассчитано в grid сетке?

P.S. Знаю, что если жестко задать ширину элементов, например, grid-template-columns: repeat(5, 100px), то свойство justify-content заработает.
Но мне хотелось. чтобы работало именно с относительной величиной 1fr

Comments

[Ankhena]

Через комбинацию nth-child и nth-last-child задаете ячейкам span 2 и отступ или размер.

https://css-live.ru/articles/resheno-s-pomoshhyu-c...

https://jsfiddle.net/Ankhena/q3s9jdmb/

[System Shock]

Ankhena, спасибо за интересный прием.
Хотелось бы конечно поуниверсальнее.
Я планиривал с помощью css var задавать количество ячеек в сетке grid-template-columns: repeat(5, 1fr), но если бы их количество было больше или меньше, чем эта css var, то ячейки бы располагались по центру родителя/либо по ширине.

[Ankhena]

system-shock, js так может.
В том числе, передавать значения в кастомные.