CSS грид ичуни ичидаги ячейкаларни вертикал ўқи бўйича текислаш

Грид ичидаги ячейкаларнинг элементларини вертикал ўқи бўйича текислаш учун биз ота-элементда бериладиган align-items хусусиятидан фойдаланамиз. Ушбу хусусиятнинг ишини браузернинг debugger'ида гридни кўриш пайтида кўриш мумкин.

Ўқнинг боши бўйича

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

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

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	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;
}

Келинг, бизнинг гридимизни браузернинг debugger'ида кўрамиз:

Ўқнинг маркази бўйича

Энди бизнинг элементларимизни ячейкалар ичида вертикал ўқнинг маркази бўйича текислаймиз:

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

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	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;
}

Келинг, бизнинг гридимизни браузернинг debugger'ида кўрамиз:

Ўқнинг охири бўйича

Элементларнинг текисланишини яна ўзгартирамиз, бу сафар вертикал ўқнинг охири бўйича:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	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 {
	
}

Келинг, бизнинг гридимизни браузернинг debugger'ида кўрамиз:

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

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

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

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