CSS гриддаги ҳужайралар ичидаги элементларни икки ўқ бўйича текислаш учун қисқартма

place-items қисқартма хусусияти ёрдамида грид ҳужайралари ичидаги элементларни икки ўқ бўйича бир вақтда текислаш мумкин. Хусусият бошлиқ билан ажратилган икита қийматни қабул қилади. Биринчи қиймат билан биз элементни тик ўқ бўйича, иккинчиси билан эса - горизонтал ўқ бўйича жойлашувини белгилаймиз. Хусусият ота-элементда белгиланади.

Келинг, бу хусусиятнинг ишлашини мисолларда кўриб чиқайлик.

Тик ўқ бўйича марказга ва горизонтал ўқ бўйича бошланғич нуқтага

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 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;
}

Гридимизни debugger да кўриб чиқайлик:

Тик ўқ бўйича охирги нуқтага ва горизонтал ўқ бўйича марказга

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 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;
}

Гридимизни debugger да кўриб чиқайлик:

Тик ўқ бўйича бошланғич нуқтага ва горизонтал ўқ бўйича охирги нуқтага

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

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 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;
}

Гридимизни debugger да кўриб чиқайлик:

Амалий машқлар

Олтита элементдан иборат грид яратинг ва уларни икки устуңга жойланг. Элементларни гриднинг горизонтал ўқи бўйича бошланғич нуқтасига ва тик ўқи бўйича марказга текисланг.

Энди грид элементларини уч устуңга жойланг ва элементларни гриднинг горизонтал ўқи бўйича марказга ва тик ўқи бўйича марказга текислашни белгиланг.

Олдинги машқни ўзгартиринг, шундай килиб, элементларнинг текисланиши гриднинг горизонтал ўқи бўйича охирги нуқтага ва тик ўқи бўйича бошланғич нуқтасига амалга оширилсин.