Uitlijning van een individueel element langs beide assen van CSS Grid

Je kunt een individueel element tegelijkertijd zowel langs de horizontale als de verticale as uitlijnen door de eigenschappen justify-self en align-self te combineren.

Start horizontaal en centrum verticaal

Laten we de uitlijning voor ons eerste element instellen op start horizontaal en centrum verticaal:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

Centrum horizontaal en start verticaal

Laten we nu de uitlijning van het eerste element instellen op centrum horizontaal en start verticaal:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

Einde horizontaal en centrum verticaal

Laten we de uitlijning van het eerste element instellen op einde horizontaal en centrum verticaal:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

Praktische opdrachten

Maak een grid bestaande uit zes elementen en plaats ze in twee rijen. Voer de uitlijning van het tweede element uit op start horizontaal en centrum verticaal.

Plaats nu de gridelementen in drie rijen en stel de uitlijning van het derde element in op centrum horizontaal en einde verticaal.

Pas de vorige opdracht aan, zodat de uitlijning van het vierde element plaatsvindt op einde horizontaal en centrum verticaal.

Zorg er nu voor dat de uitlijning van het vijfde element plaatsvindt op start horizontaal en start verticaal, en het zesde element - op einde horizontaal en centrum verticaal.