Alignement d'un élément individuel sur l'axe vertical d'une grille CSS
De manière similaire, il est possible d'aligner les éléments
sur l'axe vertical en utilisant la
propriété align-self.
Voyons avec des exemples
comment cela fonctionne.
Au début de l'axe vertical
Définissons l'alignement du premier élément au début de l'axe vertical :
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">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 {
align-self: start;
}
:
Au centre de l'axe vertical
Définissons l'alignement du premier élément au centre de l'axe vertical :
<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 {
align-self: center;
}
:
À la fin de l'axe vertical
Définissons l'alignement de notre premier élément dans la grille à la fin de l'axe vertical :
<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 {
align-self: end;
}
:
Tâches pratiques
Créez une grille composée de cinq éléments, disposés sur deux colonnes. Effectuez l'alignement du troisième élément au début de l'axe vertical de la grille.
Maintenant, disposez les éléments de la grille sur trois colonnes et définissez l'alignement du deuxième élément au centre de l'axe vertical de la grille.
Modifiez la tâche précédente pour que l'alignement des quatrième et cinquième éléments se fasse respectivement à la fin et au début de l'axe vertical de la grille.
