Својство 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,
које поставља поравнање елемената унутар ћелија грида