CSS Grid katakchalaridagi gorizontal o‘q bo‘yicha joylashtirish

Grid katakchalari ichidagi elementlarni joylashtirish uchun, ya'ni ustunlar va qatorlarning kesishishidan hosil bo‘lgan sohalarda, ota elementda belgilanadigan justify-items xususiyati qo‘llaniladi. Joylashtirishni eng aniq tarzda brauzerning debugerida gridni ko‘rib ko‘rish mumkin.

O‘q boshiga nisbatan

Keling, bizning elementlarimizni katakchalar ichida gorizontal o‘q boshiga joylashtiramiz:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Endi gridimizni debugerda ko‘rib chiqamiz:

O‘q markaziga nisbatan

Keling, bizning elementlarimizni katakchalar ichida gorizontal o‘q markaziga joylashtiramiz:

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

#parent {
	display: grid;
	justify-items: center;
	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;
}

Endi gridimizni debugerda ko‘rib chiqamiz:

O‘q oxiriga nisbatan

Keling, bizning elementlarimizni gorizontal o‘q oxiriga joylashtiramiz:

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

Endi gridimizni debugerda ko‘rib chiqamiz:

Amaliy vazifalar

Besh elementdan iborat grid yarating, ular uch qator bo‘ylab joylashgan bo‘lsin. Elementlarni gorizontal o‘q bo‘yicha joylashtiring.

Endi grid elementlarini ikki qator bo‘ylab joylashtiring va elementlarni katakchalar ichida gorizontal o‘q markaziga joylashtiring.

Oldingi vazifani o‘zgartiring, elementlarning joylashishi gorizontal o‘q oxiriga nisbatan bo‘lsin.