CSS Grid hujayralari ichidagi elementlarni vertikal o‘q bo‘yicha joylashtirish

Grid hujayralari ichidagi elementlarni vertikal o‘q bo‘yicha joylashtirish uchun biz ota elementda beriladigan align-items xususiyatidan foydalanamiz. Ushbu xususiyatning ishlashini brauzerning debuggeri orqali gridni ko‘rib ko‘rish mumkin.

O‘q boshiga nisbatan

Keling, hujayralar ichidagi elementlarimizni vertikal o‘q boshiga nisbatan joylashtiramiz:

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

Keling, gridimizni brauzerning debuggerida ko‘rib chiqamiz:

O‘q markaziga nisbatan

Endi esa elementlarimizni hujayralarda vertikal o‘q markaziga nisbatan joylashtiramiz:

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

Keling, gridimizni brauzerning debuggerida ko‘rib chiqamiz:

O‘q oxiriga nisbatan

Elementlarning joylashuvini yana o‘zgartiramiz, bu safar vertikal o‘q oxiriga nisbatan:

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

Keling, gridimizni brauzerning debuggerida ko‘rib chiqamiz:

Amaliy mashqlar

Ikkita ustundan iborat, oltita elementli grid yarating. Hujayralar ichidagi elementlarni vertikal o‘q boshiga nisbatan joylashtiring.

Endi elementlarni uchta ustunga joylashtiring va hujayralardagi elementlarni gridning vertikal o‘q markaziga nisbatan joylashtiring.

Oldingi mashqni o‘zgartiring, elementlarning joylashuvi vertikal o‘q oxiriga nisbatan bo‘lsin.