Alignement du contenu le long de l'axe horizontal dans une grille CSS

Dans une grille, il peut être nécessaire non seulement de positionner, mais aussi d'aligner le contenu le long de l'axe horizontal de la grille. Dans ce cas, nous utilisons la propriété justify-content, qui est définie sur l'élément parent. Regardons avec des exemples comment fonctionne cette propriété.

Au début de l'axe

Définissons l'alignement de nos éléments 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-content: start;
	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;
}

Au centre de l'axe

Et maintenant, définissons l'alignement de nos éléments 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-content: 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;
}

À la fin de l'axe

Définissons l'alignement de 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-content: 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;
}

Tâches pratiques

Créez une grille composée de six éléments, disposés en deux colonnes. Effectuez l'alignement des éléments au début de l'axe horizontal de la grille.

Maintenant, disposez les éléments de la grille sur trois colonnes et définissez l'alignement des éléments au centre de l'axe horizontal 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 horizontal.