Својството justify-self

Својството justify-self го поставува позиционирањето на поединечен елемент во грид по хоризонталната оска. Својството се применува на оној елемент кој сакаме да го позиционираме.

Синтакса

елемент {
	justify-self: start | center | end;
}

Вредности

Вредност	Опис
`flex-start`	Елементот е притиснат кон почетокот на хоризонталната оска.
`flex-end`	Елементот е притиснат кон крајот на хоризонталната оска.
`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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: end;
}

Погледнете ги исто така

својството place-self,
кое го поставува позиционирањето на поединечен елемент во грид
својството align-self,
кое го поставува позиционирањето на еден блок