Raccourci pour l'alignement dans les cellules sur les deux axes en CSS Grid

Avec la propriété raccourcie place-items il est possible d'aligner simultanément les éléments à l'intérieur des cellules de la grille sur les deux axes. La propriété accepte deux valeurs, séparées par un espace. La première valeur définit le positionnement de l'élément sur l'axe vertical, et la seconde - sur l'axe horizontal. La propriété est définie dans l'élément parent.

Regardons le fonctionnement de cette propriété à l'aide d'exemples.

Au centre vertical et au début horizontal

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

#parent {
	display: grid;
	place-items: center 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;
}

Regardons notre grille dans l'outil de développement :

À la fin verticale et au centre horizontal

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

#parent {
	display: grid;
	place-items: end 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;
}

Regardons notre grille dans l'outil de développement :

Au début vertical et à la fin horizontale

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

#parent {
	display: grid;
	place-items: start 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;
}

Regardons notre grille dans l'outil de développement :

Tâches pratiques

Créez une grille, composée de six éléments et placez-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, placez les éléments de la grille sur trois colonnes et définissez l'alignement des éléments au centre de l'axe horizontal et au centre de l'axe vertical de la grille.

Modifiez la tâche précédente afin que l'alignement des éléments s'effectue à la fin de l'axe horizontal et au début de l'axe vertical de la grille.