Propriété CSSGrid

place-items

Raccourci qui règle align-items et justify-items en même temps.

Valeur initiale: normal legacy
Héritée: Non
Animable: non
S’applique à: tous les éléments, l’effet se voit dans les conteneurs grid
JavaScript: element.style.placeItems = "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

.hero {
  display: grid;
  place-items: center;
  min-height: 140px;
}

Aperçu

Définition et utilisation

La propriété place-items réunit l’alignement vertical (align-items) et horizontal (justify-items). Une seule valeur règle les deux axes, deux valeurs règlent dans l’ordre le vertical puis l’horizontal.

L’usage le plus connu est de centrer un contenu : display: grid; place-items: center; place l’élément exactement au centre du conteneur sur les deux axes. Deux lignes de code au lieu des anciennes astuces.

En Flexbox, seule la partie align-items fonctionne, car justify-items y est ignorée.

Syntaxe

place-items: <align-items> <justify-items>?;

Valeurs

stretch
Les éléments remplissent toute la cellule.
center
Les éléments au centre des cellules sur les deux axes.
start end
En haut à la verticale et au bord droit à l’horizontale.
end center
En bas et au centre à l’horizontale.

Valeur	Description
stretch	Les éléments remplissent toute la cellule.
center	Les éléments au centre des cellules sur les deux axes.
start end	En haut à la verticale et au bord droit à l’horizontale.
end center	En bas et au centre à l’horizontale.

Valeurs en pratique

stretch

Les éléments remplissent toute la cellule.

.demo { place-items: stretch; }

center

Les éléments au centre des cellules sur les deux axes.

.demo { place-items: center; }

start end

En haut à la verticale et au bord droit à l’horizontale.

.demo { place-items: start end; }

end center

En bas et au centre à l’horizontale.

.demo { place-items: end center; }

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

display: grid; place-items: center; est la façon la plus courte de centrer n’importe quoi sur les deux axes.
L’ordre des deux valeurs est d’abord le vertical (align), puis l’horizontal (justify).

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