Alignement du contenu le long de l'axe vertical dans la grille CSS
Pour aligner le contenu le long de l'axe vertical
de la grille, nous utilisons
la propriété align-content, qui
est définie sur l'élément parent.
Au début de l'axe
Définissons l'alignement de nos éléments dans la grille au début de l'axe vertical :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: start;
grid-template-columns: 100px 100px;
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;
}
:
Au centre de l'axe
Maintenant, définissons l'alignement des éléments au centre de l'axe vertical :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: center;
grid-template-columns: 100px 100px;
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;
}
:
À la fin de l'axe
Définissons l'alignement des éléments à la fin de l'axe vertical :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: end;
grid-template-columns: 100px 100px;
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;
}
:
Tâches pratiques
Créez une grille composée de six éléments, disposés sur deux rangées. Effectuez l'alignement des éléments au début de l'axe vertical de la grille.
Maintenant, disposez les éléments de la grille sur deux rangées et définissez l'alignement des éléments au centre de l'axe vertical de la grille.
Modifiez la tâche précédente pour que l'alignement des éléments se fasse à la fin de l'axe vertical.
