Uitlijning op beide assen binnen CSS-gridcellen

Je kunt gelijktijdig de uitlijning van elementen binnen gridcellen instellen voor zowel de horizontale als de verticale as. Voor dit doel kunnen we de twee eigenschappen justify-items en align-items combineren, die worden ingesteld in het bovenliggende element.

Gecentreerd op de assen

Laten we onze elementen centreren op de horizontale en verticale assen:

<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;
}

Laten we nu naar ons grid kijken in de debugger:

Op start van horizontale en einde van verticale as

Laten we onze elementen in de cellen positioneren op het startpunt van de horizontale as en het eindpunt van de verticale as:

<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;
}

Laten we nu naar ons grid kijken in de debugger:

Op einde van horizontale en start van verticale as

Laten we onze elementen in de cellen positioneren op het eindpunt van de horizontale as en het startpunt van de verticale as:

<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;
}

Laten we nu naar ons grid kijken in de debugger:

Praktische opdrachten

Maak een grid bestaande uit vijf elementen, gerangschikt over drie rijen. Voer de uitlijning van de elementen in de cellen uit op het startpunt van de horizontale as en het centrum van de verticale as.

Rangschik de gridelementen nu over twee rijen en stel de uitlijning van de elementen in de cellen in op het centrum van de horizontale as en het startpunt van de verticale as.

Pas de vorige opdracht aan, zodat de uitlijning van de elementen plaatsvindt op het eindpunt van de horizontale as en het centrum van de verticale as.