CSS Gridda gorizontal o‘q bo‘yicha kontentni joylashtirish

Gridda nafaqat elementlarni joylashtirish, balki ularni gorizontal o‘q bo‘yicha joylashtirish ham talab qilinishi mumkin. Bunda biz justify-content xususiyatidan foydalanamiz, bu xususiyat ota-elementga beriladi. Keling, misollar yordamida bu xususiyatning qanday ishlashini ko‘ramiz.

O‘q boshiga

Elementlarimizni 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-content: start;
	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;
}

O‘q markaziga

Endi esa elementlarimizni 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-content: 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;
}

O‘q oxiriga

Keling, 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-content: 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;
}

Amaliy mashqlar

Ikkita ustundan iborat, oltita elementli grid yarating. Elementlarni gridning gorizontal o‘qi boshiga joylashtiring.

Endi elementlarni uchta ustunga joylashtiring va ularni gridning gorizontal o‘qi markaziga joylashtiring.

Oldingi mashqni o‘zgartiring, shunday qilibki, elementlarning joylashuvi gorizontal o‘q oxiriga amalga oshirilsin.