Alignement sur les deux axes à l'intérieur des cellules de grille CSS

Il est possible de définir simultanément l'alignement des éléments à l'intérieur des cellules de la grille à la fois sur l'axe horizontal et sur l'axe vertical. Dans ce but, nous pouvons combiner les deux propriétés justify-items et align-items, qui sont définies dans l'élément parent.

Au centre des axes

Alignons nos éléments au centre des axes horizontal et vertical :

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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 maintenant notre grille dans l'inspecteur :

Au début de l'horizontale et à la fin de la verticale

Plaçons nos éléments dans les cellules au début de l'axe horizontal et à la fin de l'axe vertical :

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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 maintenant notre grille dans l'inspecteur :

À la fin de l'horizontale et au début de la verticale

Plaçons nos éléments dans les cellules à la fin de l'axe horizontal et au début de l'axe vertical :

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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 maintenant notre grille dans l'inspecteur :

Tâches pratiques

Créez une grille, composée de cinq éléments, répartis sur trois lignes. Effectuez l'alignement des éléments dans les cellules au début de l'axe horizontal et au centre de l'axe vertical.

Maintenant, placez les éléments de la grille sur deux lignes et définissez l'alignement des éléments à l'intérieur des cellules au centre de l'axe horizontal et au début de l'axe vertical.

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.