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

Својството justify-items го задава усогласувањето на елементите внатре во ќелиите на гридот по хоризонталната оска. Највидливо усогласувањето може да се забележи при преглед на гридот во дебагерот на прелистувачот. Се применува на родителскиот елемент.

Синтакса

селектор {
	justify-items: flex-start | flex-end | center ;
}

Вредности

Вредност	Опис
`flex-start`	Елементите се притиснати кон почетокот на хоризонталната оска.
`flex-end`	Блоковите се притиснати кон крајот на хоризонталната оска.
`center`	Блоковите се поставени во центарот на хоризонталната оска.

Пример . Усогласување по почеток на хоризонталната оска

Ајде да ги усогласиме нашите елементи внатре во ќелиите по почетокот на хоризонталната оска:

<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);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	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>5</div>
</div>

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

Со поврзување на дебагерот на прелистувачот ќе го видиме нашиот грид:

Пример . Усогласување по крај на хоризонталната оска

Ајде да ги усогласиме нашите елементи по крајот на хоризонталната оска:

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

Сега да го погледнеме гридот преку дебагерот:

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

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