Propriété CSSGrid

justify-items

Aligne tous les éléments dans leurs cellules le long de l’axe horizontal.

Valeur initiale: legacy
Héritée: Non
Animable: non
S’applique à: tous les éléments, l’effet se voit dans les conteneurs grid
JavaScript: element.style.justifyItems = "center"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

Aperçu

Définition et utilisation

La propriété justify-items se règle sur le conteneur grid. Elle décide comment chaque élément se place dans sa cellule à l’horizontale : il s’étire sur toute la largeur de la cellule, se colle à gauche, à droite, ou se place au centre.

Par défaut, les éléments de la grille s’étirent. Passer à start ou center fait que l’élément prend la largeur de son contenu, et le reste de la cellule reste vide.

En Flexbox, cette propriété ne fonctionne pas, car c’est justify-content et les marges qui répartissent les éléments sur l’axe principal.

Syntaxe

justify-items: normal | stretch | start | end | center | legacy;

Valeurs

stretch
Les éléments remplissent toute la largeur des cellules.
start
Les éléments se collent au bord gauche des cellules.
center
Les éléments se placent au centre des cellules.
end
Les éléments se collent au bord droit des cellules.

Valeur	Description
stretch	Les éléments remplissent toute la largeur des cellules.
start	Les éléments se collent au bord gauche des cellules.
center	Les éléments se placent au centre des cellules.
end	Les éléments se collent au bord droit des cellules.

Valeurs en pratique

stretch

Les éléments remplissent toute la largeur des cellules.

.demo { justify-items: stretch; }

start

Les éléments se collent au bord gauche des cellules.

.demo { justify-items: start; }

center

Les éléments se placent au centre des cellules.

.demo { justify-items: center; }

end

Les éléments se collent au bord droit des cellules.

.demo { justify-items: end; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Pour aligner un élément différemment des autres, utilisez justify-self sur cet élément.
Le raccourci place-items règle en une fois align-items et justify-items.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours