Wie kann ich Elemente in der letzten Zeile in einem Raster zentrieren (CSS, JSX)?
Posted: 17 Jan 2025, 06:40
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.
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;
}