Wie kann ich Elemente in der letzten Zeile in einem Raster zentrieren (CSS, JSX)? ⇐ HTML

[Guest]

Jede Zeile kann maximal 4 Elemente enthalten. Wenn sie jedoch weniger (1, 2, 3) enthält, sollten diese Elemente zentriert sein. Und wenn es nur 1,2 oder 3 Elemente gibt, sollten diese ebenfalls zentriert sein. Der „justify-content“ scheint nicht zu funktionieren und ich habe auch versucht, „justify-items“ zu verwenden.
Klarstellung: Das Tag „.tech-used“ ist nur für ein übergeordnetes Element Element, aber ich habe es nicht in das JSX-Code-Snippet eingefügt.

Code: Select all

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

[img]{skill.logo} alt={`${skill.name} logo`} className=[/img]
{skill.name}

))}

Code: Select all

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