Justering inde i CSS grid-celler langs den vandrette akse

Til justering af elementer inde i grid-celler, dvs. områder, der opstår ved skæring af kolonner og rækker, anvendes egenskaben justify-items, som angives i forældreelementet. Justeringen kan mest tydeligt ses ved visning af griddet i browserens debugger.

Ved starten af aksen

Lad os justere vores elementer inde i cellerne ved starten af den vandrette akse:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Og lad os nu se på vores grid i debuggeren:

Ved centrum af aksen

Lad os justere vores elementer i cellerne ved centrum af den vandrette akse:

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

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

Og lad os nu se på vores grid i debuggeren:

Ved enden af aksen

Lad os justere vores elementer ved enden af den vandrette akse:

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

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

Og 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 langs den vandrette akse.

Placer nu griddets elementer på to rækker og angiv justering af elementerne i cellerne ved centrum af den vandrette akse.

Ændr den forrige opgave, så justering af elementerne sker ved enden af den vandrette akse.