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

Gorizontal o‘q bo‘yicha joylashtirishni nafaqat ota-elementda, balki har bir bola-element uchun alohida belgilash mumkin. Buning uchun justify-self xususiyati ishlatiladi.

Gorizontal o‘qning boshiga qarab

Keling, birinchi elementimiz uchun gorizontal o‘qning boshiga joylashtirishni o‘rnatamiz:

<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 {
	justify-self: start;
}

Gorizontal o‘qning markaziga qarab

Keling, birinchi element uchun gorizontal o‘qning markaziga joylashtirishni o‘rnatamiz:

<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 {
	justify-self: center;
}

Gorizontal o‘qning oxiriga qarab

Keling, birinchi element uchun gorizontal o‘qning oxiriga joylashtirishni o‘rnatamiz:

<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 {
	justify-self: end;
}

Amaliy vazifalar

Ikkita qatordan iborat beshta elementli grid yarating. Ikkinchi elementni gorizontal o‘qning boshiga joylashtiring.

Endi grid elementlarini uch qator bo‘yicha joylashtiring va uchinchi elementni grid gorizontal o‘qining markaziga joylashtirishni belgilang.

Oldingi vazifani o‘zgartiring, beshinchi elementning joylashishi gorizontal o‘qning oxiriga qarab bo‘lishi kerak.