Alignement dans les cellules de la grille CSS le long de l'axe horizontal
Pour aligner les éléments à l'intérieur des cellules de la grille,
c'est-à-dire les zones créées par l'intersection des colonnes et des rangées,
on utilise la propriété justify-items, qui
est définie sur l'élément parent.
L'alignement est plus visible
lorsqu'on visualise la grille dans l'outil de développement du navigateur.
Au début de l'axe
Alignons nos éléments à l'intérieur des cellules au début de l'axe horizontal :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
height: 200px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Regardons maintenant notre grille dans l'outil de développement :
Au centre de l'axe
Alignons nos éléments dans les cellules au centre de l'axe horizontal :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: center;
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;
}
:
Regardons maintenant notre grille dans l'outil de développement :
À la fin de l'axe
Alignons nos éléments à la fin de l'axe horizontal :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: end;
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;
}
:
Regardons maintenant notre grille dans l'outil de développement :
Tâches pratiques
Créez une grille composée de cinq éléments, répartis sur trois rangées. Effectuez l'alignement des éléments le long de l'axe horizontal.
Maintenant, disposez les éléments de la grille sur deux rangées et définissez l'alignement des éléments dans les cellules au centre de l'axe horizontal.
Modifiez la tâche précédente pour que l'alignement des éléments se fasse à la fin de l'axe horizontal.
