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

Грид ичларидаги, яъни устунлар ва қаторлар кесишиши натижасида ҳосил бўлган соҳалар ичидаги элементларни текислаш учун justify-items хусусияти ишлатилади, у эса ота-элементда берилади. Текислашни энг яхши тарзда кўриш учун браузернинг debugger воситасида гридни кўриш мумкин.

Ўқ бошланиши бўйича

Келингиз, бизнинг элементларимизни ичларидаги горизонтал ўқнинг бошланиши бўйича текислаймиз:

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

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

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

Келингиз, бизнинг элементларимизни ичларида горизонтал ўқнинг маркази бўйича текислаймиз:

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

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

Ўқ охири бўйича

Келингиз, бизнинг элементларимизни горизонтал ўқнинг охири бўйича текислаймиз:

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

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

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

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

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

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