CSS гридда алоҳида элементни вертикал ўқи бўйича текислаш

Худди шунингдек, элементларни вертикал ўқи бўйича 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;
}

Вертикал ўқнинг охирига қараб

Келинг, гриддаги биринчи элемент учун вертикал ўқнинг охирига қараб текислашни ўрнатайлик:

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

Амалий вазифалар

Икки устундан иборат бўлган, беш элементли грид яратинг. Учинчи элементни гриднинг вертикал ўқи бошига қараб текисланг.

Энди элементларни уч устунли гридда жойлангринг ва иккинчи элементни гриднинг вертикал ўқи марказига қараб текисланг.

Олдинги вазифани ўзгартиринг, тўртинчи ва бешинчи элементлар мос равишда вертикал ўқнинг охири ва бошига қараб текислансин.