Alignement dans les cellules de la grille CSS le long de l'axe vertical

Pour aligner les éléments à l'intérieur des cellules de la grille le long de l'axe vertical, nous utilisons la propriété align-items, qui est définie sur l'élément parent. Le fonctionnement de cette propriété peut être observé en inspectant la grille dans le débogueur du navigateur.

Au début de l'axe

Alignons nos éléments à l'intérieur des cellules 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-items: flex-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;
}

Regardons notre grille dans le débogueur du navigateur :

Au centre de l'axe

Et maintenant, alignons nos éléments dans les cellules 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-items: 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;
}

Regardons notre grille dans le débogueur du navigateur :

À la fin de l'axe

Modifions à nouveau l'alignement des éléments, cette fois à la fin de l'axe vertical :

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Regardons notre grille dans le débogueur du navigateur :

Tâches pratiques

Créez une grille composée de six éléments, disposés sur deux colonnes. Effectuez l'alignement des éléments à l'intérieur des cellules au début de l'axe vertical.

Maintenant, disposez les éléments de la grille sur trois colonnes et définissez l'alignement des éléments dans les cellules au centre de l'axe vertical de la grille.

Modifiez la tâche précédente de manière à ce que l'alignement des éléments se fasse à la fin de l'axe vertical.