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

Горизантал ўқ бўйича текислашни фақат она элементдагина эмас, балки ҳар бир фарзанд учун алоҳида белгилаш мумкин. Бунинг учун justify-self хусусияти ишлатилади.

Горизантал ўқнинг боши бўйича

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

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: start;
}

Горизантал ўқнинг маркази бўйича

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

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: center;
}

Горизантал ўқнинг охири бўйича

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

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: end;
}

Амалиёт вазифалари

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

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

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