Propriété place-items

La propriété place-items définit simultanément l'alignement des colonnes et des rangées, ce qui réduit considérablement le code que nous utilisons. 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é place-items est définie dans l'élément parent. Il est pratique de visualiser le fonctionnement de place-items via le débogueur du navigateur.

Syntaxe

sélecteur {
	place-items: valeur d'alignement horizontal valeur d'alignement vertical;
}

Exemple . Alignement au centre 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>5</div>
</div>

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Examinons notre grille via le débogueur du navigateur :

Exemple . Alignement à la fin de l'axe vertical et au centre de l'axe 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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Et maintenant, jetons un œil dans le panneau du débogueur :

Exemple . Alignement 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;
	place-items: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Examinons l'alignement des éléments dans les cellules à l'aide du débogueur du navigateur :

Voir aussi

la propriété justify-items,
qui définit l'alignement des éléments à l'intérieur des cellules de la grille sur l'axe horizontal
la propriété align-items,
qui définit l'alignement sur l'axe transversal