place-content
Raccourci qui règle align-content et justify-content en même temps.
- Valeur initiale
normal- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs grid, conteneurs flex à plusieurs lignes et conteneurs multi-colonnes
- JavaScript
element.style.placeContent = "center"
Exemple
#.board {
display: grid;
grid-template-columns: repeat(3, 44px);
place-content: center;
gap: 6px;
height: 180px;
}<div class="board stage">
<div class="box">X</div><div class="box">O</div><div class="box">X</div>
<div class="box">O</div><div class="box">X</div><div class="box">O</div>
</div>Définition et utilisation
#La propriété place-content réunit align-content (vertical) et justify-content (horizontal). Elle répartit tout le contenu du conteneur, c’est-à-dire les lignes et colonnes entières de la grille, ou les lignes d’éléments flex, quand il reste de l’espace libre.
La différence avec place-items est subtile mais importante : place-items aligne les éléments dans leurs cellules, tandis que place-content déplace toute la grille à l’intérieur du conteneur.
Une seule valeur règle les deux axes. Les valeurs basées sur la ligne de base font exception et ne concernent que le vertical.
Syntaxe
#place-content: <align-content> <justify-content>?;Valeurs
#- La grille se place dans le coin supérieur gauche.
- Toute la grille au centre du conteneur.
- La grille en bas, contre le bord gauche.
- Les lignes et les colonnes s’écartent jusqu’aux bords.
Valeurs en pratique
#normal
.demo { place-content: normal; }center
.demo { place-content: center; }end start
.demo { place-content: end start; }space-between
.demo { place-content: space-between; }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
#- Quand la grille a des dimensions fixes plus petites que le conteneur,
place-content: centerla centre tout entière. - Si vous voulez aligner les éléments dans les cellules, et non toute la grille, utilisez
place-items.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.