Poravnava posameznega elementa na navpični osi CSS mreže

Podobno lahko poravnavamo elemente na navpični osi z uporabo lastnosti align-self. Poglejmo si s primeri, kako deluje.

Na začetek navpične osi

Nastavimo poravnavo prvega elementa na začetek navpične osi:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: start;
}

Na sredino navpične osi

Nastavimo poravnavo prvega elementa na sredino navpične osi:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: center;
}

Na konec navpične osi

Nastavimo poravnavo za naš prvi element v mreži na konec navpične osi:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: end;
}

Praktične naloge

Ustvarite mrežo, sestavljeno iz petih elementov, razporejenih v dva stolpca. Izvedite poravnavo tretjega elementa na začetek navpične osi mreže.

Zdaj razporedite elemente mreže v tri stolpce in nastavite poravnavo drugega elementa na sredino navpične osi mreže.

Spremenite prejšnjo nalogo tako, da se bo poravnava četrtega in petega elementa izvedla na konec oziroma začetek navpične osi.