Uitlijning binnen CSS-gridcellen langs de verticale as

Om elementen binnen gridcellen langs de verticale as uit te lijnen gebruiken we de eigenschap align-items, die wordt ingesteld in het bovenliggende element. De werking van deze eigenschap is te zien bij het inspecteren van het grid in de debugger van de browser.

Aan het begin van de as

Laten we onze elementen binnen de cellen uitlijnen aan het begin van de verticale as:

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

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

Laten we naar ons grid kijken in de browserdebugger:

In het midden van de as

Laten we nu onze elementen in de cellen uitlijnen in het midden van de verticale as:

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

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

Laten we naar ons grid kijken in de browserdebugger:

Aan het einde van de as

Laten we de uitlijning van de elementen opnieuw wijzigen, deze keer aan het einde van de verticale as:

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

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

Laten we naar ons grid kijken in de browserdebugger:

Praktische opdrachten

Maak een grid bestaande uit zes elementen, gerangschikt in twee kolommen. Voer de uitlijning van de elementen binnen de cellen uit aan het begin van de verticale as.

Plaats de gridelementen nu in drie kolommen en stel de uitlijning van de elementen in de cellen in op het midden van de verticale as van het grid.

Pas de vorige opdracht zo aan, dat de uitlijning van de elementen plaatsvindt aan het einde van de verticale as.