Alignement d'un élément individuel sur les deux axes de la grille CSS

Il est possible d'aligner un élément individuel à la fois sur l'axe horizontal et sur l'axe vertical en combinant les propriétés justify-self et align-self.

Au début de l'axe horizontal et au centre de l'axe vertical

Définissons l'alignement de notre premier élément au début de l'axe horizontal et 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 {
	justify-self: start;
	align-self: center;
}

Au centre de l'axe horizontal et au début de l'axe vertical

Maintenant, définissons l'alignement du premier élément au centre de l'axe horizontal et au début 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 {
	justify-self: center;
	align-self: start;
}

À la fin de l'axe horizontal et au centre de l'axe vertical

Définissons l'alignement du premier élément à la fin de l'axe horizontal et 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 {
	justify-self: end;
	align-self: center;
}

Tâches pratiques

Créez une grille composée de six éléments et disposez-les sur deux lignes. Effectuez l'alignement du deuxième élément au début de l'axe horizontal et au centre de l'axe vertical.

Maintenant, disposez les éléments de la grille sur trois lignes et définissez l'alignement du troisième élément au centre de l'axe horizontal et à la fin de l'axe vertical.

Modifiez la tâche précédente pour que l'alignement du quatrième élément se fasse à la fin de l'axe horizontal et au centre de l'axe vertical.

Maintenant, faites en sorte que l'alignement du cinquième élément se fasse au début de l'axe horizontal et au début de l'axe vertical, et celui du sixième élément - à la fin de l'axe horizontal et au centre de l'axe vertical.