CSS Grid katakchalarida ikkala o'q bo'yicha joylashtirish

Grid katakchalari ichidagi elementlarni gorizontal va vertikal o'qlar bo'yicha birdaniga joylashtirishni belgilash mumkin. Buning uchun biz justify-items va align-items xususiyatlarini birlashtirishimiz mumkin, ular ota-elementda belgilanadi.

O'qlar markazi bo'yicha

Keling, elementlarimizni gorizontal va vertikal o'qlar markazi bo'yicha joylashtiramiz:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Endi gridimizni debuggerda ko'rib chiqamiz:

Gorizontal boshiga va vertikal oxiriga

Keling, elementlarimizni katakchalar ichida gorizontal o'q boshiga va vertikal o'q oxiriga joylashtiramiz:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Endi gridimizni debuggerda ko'rib chiqamiz:

Gorizontal oxiriga va vertikal boshiga

Keling, elementlarimizni katakchalar ichida gorizontal o'q oxiriga va vertikal o'q boshiga joylashtiramiz:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Endi gridimizni debuggerda ko'rib chiqamiz:

Amaliy vazifalar

Uch qatordan iborat beshta elementli grid yarating. Elementlarni katakchalar ichida gorizontal o'q boshiga va vertikal o'q markaziga joylashtiring.

Endi elementlarni ikki qatorli gridda joylashtiring va ularni katakchalar ichida gorizontal o'q markaziga va vertikal o'q boshiga joylashtiring.

Oldingi vazifani o'zgartiring, elementlarni gorizontal o'q oxiriga va vertikal o'q markaziga joylashtiring.