Raccourci pour aligner un élément individuel dans la grille CSS
Il est possible d'aligner simultanément un élément individuel
sur les axes horizontal et vertical.
Pour cela, on utilise la propriété place-self.
Elle accepte deux valeurs séparées par un espace.
La première valeur spécifie l'alignement
sur l'axe vertical, et la seconde - sur l'axe horizontal.
Regardons cela avec des exemples.
Au centre vertical et au début horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
Au début vertical et à la fin horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
À la fin vertical et au centre horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
Tâches pratiques
Créez une grille composée de cinq éléments et placez-les sur trois lignes. Effectuez l'alignement du premier élément au début de l'axe horizontal et au centre de l'axe vertical.
Modifiez la tâche précédente afin que l'alignement du troisième élément se fasse à la fin de l'axe horizontal et au centre de l'axe vertical.
Maintenant, placez les éléments de la grille sur deux lignes et définissez l'alignement du cinquième élément au centre de l'axe horizontal et à la fin de l'axe vertical.
Faites en sorte que le deuxième élément soit aligné au début de l'axe horizontal et à la fin de l'axe vertical, et que le quatrième élément soit aligné au centre de l'axe horizontal et au début de l'axe vertical.
