Propriété CSSGrid
place-self
Raccourci qui règle align-self et justify-self d’un seul élément.
- Valeur initiale
auto- Héritée
- Non
- Animable
- non
- S’applique à
- éléments grid, éléments flex (verticalement seulement) et éléments en position absolue
- JavaScript
element.style.placeSelf = "center"
Exemple
#CSS
.tile {
display: grid;
grid-template-columns: 1fr;
}
.tile .badge {
grid-area: 1 / 1;
place-self: start end;
}HTML de l’exemple
<div class="tile stage" style="display: grid;">
<div class="box" style="grid-area: 1 / 1; height: 90px;">Module 5</div>
<span class="badge" style="grid-area: 1 / 1; place-self: start end; margin: 6px; padding: 2px 8px; border-radius: 99px; background: #f43f5e; font-size: 12px;">Nouveau</span>
</div>Aperçu
Définition et utilisation
#La propriété place-self réunit l’alignement vertical (align-self) et horizontal (justify-self) d’un élément. Vous la réglez sur un élément précis de la grille pour le placer dans sa cellule différemment des autres.
Une seule valeur agit sur les deux axes, donc place-self: center centre l’élément dans sa cellule. Deux valeurs se donnent dans l’ordre : vertical, puis horizontal.
Dans les éléments flex, seule la partie verticale fonctionne, car justify-self y est ignorée.
Syntaxe
#Syntaxe
place-self: <align-self> <justify-self>?;Valeurs
#- L’élément suit l’alignement du conteneur et s’étire.
- L’élément 2 au centre de sa cellule.
- L’élément 2 dans le coin inférieur droit de la cellule.
- En haut et au centre à l’horizontale.
Valeurs en pratique
#auto
L’élément suit l’alignement du conteneur et s’étire.
.target { place-self: auto; }center
L’élément 2 au centre de sa cellule.
.target { place-self: center; }end
L’élément 2 dans le coin inférieur droit de la cellule.
.target { place-self: end; }start center
En haut et au centre à l’horizontale.
.target { place-self: start 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
#- Superposer des éléments dans la même cellule (
grid-area: 1 / 1) avecplace-selfest une alternative pratique àposition: absolute. - Ordre des valeurs : d’abord le vertical (align), puis l’horizontal (justify).
Entrées associées
#- align-selfRemplace l’alignement d’un seul élément sur l’axe secondaire.
- justify-selfAligne un seul élément dans sa cellule de grille le long de l’axe horizontal.
- place-itemsRaccourci qui règle align-items et justify-items en même temps.
- grid-areaAssigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.