CSS грид ичларида икки ўқ бўйлаб текислаш

Грид ичларидаги элементларни горизонтал ва вертикал ўқлар бўйлаб бир вақтда текислашни белгилаш мумкин. Бу мақсадда биз родитель элементда бериладиган justify-items ва align-items хоссаларини бирлаштиришимиз мумкин.

Ўқлар маркази бўйича

Элементларимизни горизонтал ва вертикал ўқлар маркази бўйича текислаймиз:

<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;
}

Энди гридимизни дебакгерда кўрамиз:

Горизонтал бошланиши ва вертикал охири бўйича

Элементларимизни ичларда горизонтал ўқнинг бошланиши ва вертикал ўқнинг охири бўйича жойлаштирамиз:

<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;
}

Энди гридимизни дебакгерда кўрамиз:

Горизонтал охири ва вертикал бошланиши бўйича

Элементларимизни ичларда горизонтал ўқнинг охири ва вертикал ўқнинг бошланиши бўйича жойлаштирамиз:

<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;
}

Энди гридимизни дебакгерда кўрамиз:

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

Уч қаторда жойлаштан беш элементдан ташкил топган грид яратинг. Ичлардаги элементларни горизонтал ўқнинг бошланиши ва вертикал ўқнинг маркази бўйича текисланг.

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

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