CSS Grid'деги жеке элементти тик огу боюнча тегиздөө

Ошо сыяктуу элементтерди align-self касиетинин жардамы менен тик огу боюнча тегиздей аласыз. Келгиле, мисалдар аркылуу бул кантип иштээрин көрөлү.

Тик огунун башталышы боюнча

Биринчи элемент үчүн тик огунун башталышы боюнча тегиздөөнү орнойлу:

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

Тик огунун борбору боюнча

Биринчи элемент үчүн тик огунун борбору боюнча тегиздөөнү орнойлу:

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

Тик огунун аягы боюнча

Grid'деги биздин биринчи элемент үчүн тик огунун аягы боюнча тегиздөөнү орнойлу:

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

Практикалык тапшырмалар

Эки тилкеменен жайгашкан беш элементтен турган grid түзүңүз. Үчүнчү элементтин gridдин тик огунун башталышы боюнча тегиздөөсүн аткаргыла.

Эми элементтерди үч тилке боюнча жайгаштырып, экинчи элементтин gridдин тик огунун борбору боюнча тегиздөөсүн белгилегиле.

Мурдагы тапшырманы өзгөртүп, төртүнчү жана бешинчи элементтердин тегиздөөсү тик огунун аягы жана башталышы боюнча аткарылсын.