Üksiku elemendi joondamine vertikaalteljel CSS-võrgus

Samamoodi saab elemente vertikaalteljel joondada omaduse align-self abil. Vaatame näidetega, kuidas see töötab.

Vertikaaltelje alguse suhtes

Määrame esimese elemendi joonduse vertikaaltelje alguse suhtes:

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

Vertikaaltelje keskpunkti suhtes

Määrame esimese elemendi joonduse vertikaaltelje keskpunkti suhtes:

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

Vertikaaltelje lõpu suhtes

Määrame oma esimese elemendi joonduse võrgus vertikaaltelje lõpu suhtes:

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

Praktilised ülesanded

Loo võrk, mis koosneb viiest elemendist, paigutatud kahte veergu. Teosta kolmanda elemendi joondamine võrgu vertikaaltelje alguse suhtes.

Nüüd paiguta võrgu elemendid kolme veeru peale ja määra teise elemendi joondamine võrgu vertikaaltelje keskpunkti suhtes.

Muuta eelmist ülesannet nii, et neljanda ja viienda elemendi joondamine toimuks vastavalt vertikaaltelje lõpu ja alguse suhtes.