How can I center elements in the last row in a grid (CSS, JSX)?

Each row can have a max of 4 elements, but if it has less (1, 2, 3) those elements should be centered. And if there are only 1,2, or 3 elements, those should be centered too. The justify-content doesn’t seem to be working and I’ve also tried using justify-items as well.

Clarification: the ‘.tech-used’ tag is just for a parent element, but I didn’t include it in the JSX code snippet.

<div className="tech-grid">
   {project.skills.map((skill, index) => (
       <div className="tech-item" key={index}>
          <img src={skill.logo} alt={`${skill.name} logo`} className="skill-logo"/>
          <p>{skill.name}</p>
        </div>
    ))}
</div>

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