Forkortelse for justering inde i celler langs begge akser i CSS grid

Med shorthand-egenskaben place-items kan man samtidigt justere elementer inde i grid-celler langs begge akser. Egenskaben tager to værdier, adskilt af mellemrum. Med den første værdi angiver vi placeringen af elementet langs den lodrette, og med den anden - langs den vandrette akse. Egenskaben angives i forældreelementet.

Lad os se på, hvordan denne egenskab fungerer med eksempler.

I midten af den lodrette og starten af den vandrette

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

Lad os se på vores grid i debuggeren:

Ved slutningen af den lodrette og midten af den vandrette

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

Lad os se på vores grid i debuggeren:

Ved starten af den lodrette og slutningen af den vandrette

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

Lad os se på vores grid i debuggeren:

Praktiske opgaver

Opret et grid, der består af seks elementer og placer dem i to kolonner. Udfør justering af elementerne ved starten af den vandrette og midten af den lodrette akse i griddet.

Placer nu gridelementerne i tre kolonner og angiv justering af elementerne ved midten af den vandrette og midten af den lodrette akse i griddet.

Ændr den forrige opgave, så justering af elementerne sker ved slutningen af den vandrette og starten af den lodrette akse i griddet.