Justering inde i CSS grid-celler langs den lodrette akse

Til at justere elementer inde i grid-celler langs den lodrette akse bruger vi egenskaben align-items, som angives i forældreelementet. Denne egenskabs funktion kan ses ved at inspicere griddet i browserens fejlsøger.

På aksens start

Lad os justere vores elementer inde i cellerne på starten af den lodrette akse:

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

Lad os se på vores grid i browserens fejlsøger:

På aksens center

Og lad os nu justere vores elementer i cellerne på centret af den lodrette akse:

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

Lad os se på vores grid i browserens fejlsøger:

På aksens ende

Lad os igen ændre justeringen af elementerne, denne gang på enden af den lodrette akse:

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

Lad os se på vores grid i browserens fejlsøger:

Praktiske opgaver

Opret et grid, der består af seks elementer, placeret i to kolonner. Udfør justering af elementerne inde i cellerne på starten af den lodrette akse.

Placer nu griddets elementer i tre kolonner og angiv justering af elementerne i cellerne på centret af den lodrette akse i griddet.

Ændr den forrige opgave, så justeringen af elementerne sker på enden af den lodrette akse.