Как центрировать элементы в последней строке сетки (CSS, JSX)? ⇐ Html

[Anonymous]

В каждой строке может быть максимум 4 элемента, но если их меньше (1, 2, 3), эти элементы должны быть центрированы. А если элементов только 1,2 или 3, их тоже следует центрировать. Кажется, justify-content не работает, и я также пробовал использовать justify-items.
Пояснение: тег .tech-used предназначен только для родительского элемента. элемент, но я не включил его в фрагмент кода JSX.

{project.skills.map((skill, index) => (


{skill.name}

))}


.tech-used{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

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

.tech-item{
display: flex;[![enter image description here][1]][1]
flex-direction: column;
align-items: center;
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... id-css-jsx