CSS Gridda alohida elementni vertikal o‘q bo‘yicha joylashtirish

Xuddi shu tarzda elementlarni vertikal o‘q bo‘yicha align-self xususiyati yordamida joylashtirish mumkin. Keling, misollar orqali buning qanday ishlashini ko‘ramiz.

Vertikal o‘q boshiga nisbatan

Keling, birinchi elementni vertikal o‘q boshiga nisbatan joylashtiramiz:

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

Vertikal o‘q markaziga nisbatan

Keling, birinchi elementni vertikal o‘q markaziga nisbatan joylashtiramiz:

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

Vertikal o‘q oxiriga nisbatan

Keling, griddagi birinchi elementni vertikal o‘q oxiriga nisbatan joylashtiramiz:

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

Amaliy mashqlar

Ikkita ustundan iborat, beshta elementli grid yarating. Uchinchi elementni gridning vertikal o‘qi boshiga nisbatan joylashtiring.

Endi elementlarni uchta ustunli gridda joylashtiring va ikkinchi elementni gridning vertikal o‘qi markaziga nisbatan joylashtiring.

Oldingi mashqni o‘zgartiring, to‘rtinchi va beshinchi elementlarni mos ravishda vertikal o‘q oxiri va boshiga nisbatan joylashtiring.