Proprietatea justify-items

Proprietatea justify-items definește alinierea elementelor în interiorul celulelor grilei pe axa orizontală. Alinierea este cel mai ușor de observat la vizualizarea grilei în instrumentul de dezvoltare al browserului. Se aplică elementului părinte.

Sintaxă

selector {
	justify-items: flex-start | flex-end | center ;
}

Valori

Valoare	Descriere
`flex-start`	Elementele sunt aliniate la începutul axei orizontale.
`flex-end`	Blocurile sunt aliniate la sfârșitul axei orizontale.
`center`	Blocurile sunt centrate pe axa orizontală.

Exemplul . Alinierea la începutul axei orizontale

Să aliniem elementele noastre în interiorul celulelor la începutul axei orizontale:

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

Și acum să ne uităm la grila noastră în instrumentul de dezvoltare:

Exemplul . Alinierea la centrul axei orizontale

Să aliniem elementele noastre în celule la centrul axei orizontale:

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

Conectând instrumentul de dezvoltare al browserului vom vedea grila noastră:

Exemplul . Alinierea la sfârșitul axei orizontale

Să aliniem elementele noastre la sfârșitul axei orizontale:

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

Acum să ne uităm la grilă prin instrumentul de dezvoltare:

Vedeți și

proprietatea align-items,
care definește alinierea pe axa transversală
proprietatea place-items,
care definește alinierea elementelor în interiorul celulelor grilei