Justering langs begge akser inde i CSS grid-celler

Man kan samtidig angive justering af elementer inde i grid-celler både langs den vandrette og den lodrette akse. Til dette formål kan vi kombinere de to egenskaber justify-items og align-items, som angives i forælderelementet.

I midten af akserne

Lad os justere vores elementer i midten af den vandrette og lodrette akse:

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

Lad os nu se på vores grid i debuggeren:

Ved starten af vandret og slutningen af lodret

Lad os placere vores elementer i cellerne ved starten af den vandrette akse og slutningen af den lodrette akse:

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

Lad os nu se på vores grid i debuggeren:

Ved slutningen af vandret og starten af lodret

Lad os placere vores elementer i cellerne ved slutningen af den vandrette akse og starten af den lodrette akse:

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

Lad os nu se på vores grid i debuggeren:

Praktiske opgaver

Opret et grid, der består af fem elementer, placeret på tre rækker. Udfør justering af elementerne i cellerne ved starten af den vandrette akse og midten af den lodrette akse.

Placer nu grid-elementerne på to rækker og angiv justering af elementerne inde i cellerne ved midten af den vandrette akse og starten af den lodrette akse.

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