Alignement du contenu le long des deux axes en CSS Grid

Il est souvent nécessaire dans une grille d'aligner le contenu simultanément le long des axes horizontal et vertical de la grille. Dans ce but, nous pouvons utiliser conjointement les deux propriétés que vous avez vues dans la leçon précédente : justify-content et align-content.

Au début de l'axe vertical et à la fin de l'axe horizontal

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

À la fin de l'axe vertical et au début de l'axe horizontal

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

Au centre de l'axe vertical et de l'axe horizontal

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

Tâches pratiques

Créez une grille composée de six éléments et disposez-les sur deux colonnes. Effectuez l'alignement des éléments au début de l'axe horizontal et au centre de l'axe vertical 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 et à la fin de l'axe vertical de la grille.

Modifiez la tâche précédente, pour que l'alignement des éléments se fasse à la fin de l'axe horizontal et au centre de l'axe vertical de la grille.