Atskiro elemento lygiavimas vertikalioje CSS tinklelio ašyje

Panašiu būdu galima lygiuoti elementus vertikalioje ašyje naudojant savybę align-self. Pažiūrėkime pavyzdžiuose, kaip tai veikia.

Pagal vertikalios ašies pradžią

Nustatykime pirmojo elemento lygiavimą pagal vertikalios ašies pradžią:

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

Pagal vertikalios ašies centrą

Nustatykime pirmojo elemento lygiavimą pagal vertikalios ašies centrą:

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

Pagal vertikalios ašies pabaigą

Nustatykime mūsų pirmojo elemento tinklelyje lygiavimą pagal vertikalios ašies pabaigą:

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

Praktinės užduotys

Sukurkite tinklelį, susidedantį iš penkių elementų, išdėstytų dviem stulpeliais. Atlikite trečiojo elemento lygiavimą pagal vertikalios tinklelio ašies pradžią.

Dabar išdėstykite tinklelio elementus trimis stulpeliais ir nustatykite antrojo elemento lygiavimą pagal vertikalios tinklelio ašies centrą.

Pakeiskite ankstesnę užduotį taip, kad ketvirto ir penkto elementų lygiavimai vyktų pagal vertikalios ašies pabaigą ir pradžą atitinkamai.