Alignement d'un élément individuel sur l'axe horizontal d'une grille CSS

L'alignement sur l'axe horizontal peut être défini non seulement dans l'élément parent, mais aussi pour chaque enfant individuellement. Dans ce but, on utilise la propriété justify-self.

Au début de l'axe horizontal

Définissons l'alignement de notre premier élément au début de l'axe horizontal :

<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;
}

Au centre de l'axe horizontal

Définissons l'alignement du premier élément au centre de l'axe horizontal :

<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;
}

À la fin de l'axe horizontal

Définissons l'alignement du premier élément à la fin de l'axe horizontal :

<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;
}

Tâches pratiques

Créez une grille composée de cinq éléments, disposés sur deux lignes. Effectuez l'alignement du deuxième élément au début de l'axe horizontal.

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 de la grille.

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