Vlastnosť justify-items

Vlastnosť justify-items nastavuje zarovnanie prvkov vo vnútri buniek gridu pozdĺž horizontálnej osi. Zarovnanie je najzreteľnejšie pri prezeraní gridu v nástrojoch vývojára prehliadača. Aplikuje sa na nadradený prvok.

Syntax

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

Hodnoty

Hodnota	Popis
`flex-start`	Prvky sú pritlačené k začiatku horizontálnej osi.
`flex-end`	Bloky sú pritlačené ku koncu horizontálnej osi.
`center`	Bloky sú umiestnené v strede horizontálnej osi.

Príklad . Zarovnanie na začiatok horizontálnej osi

Zarovnajme naše prvky vo vnútri buniek na začiatok horizontálnej osi:

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

A teraz sa pozrime na náš grid v nástrojoch vývojára:

Príklad . Zarovnanie do stredu horizontálnej osi

Zarovnajme naše prvky v bunkách do stredu horizontálnej osi:

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

Pripojením nástrojov vývojára v prehliadači uvidíme náš grid:

Príklad . Zarovnanie na koniec horizontálnej osi

Zarovnajme naše prvky na koniec horizontálnej osi:

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

Teraz sa pozrime na grid cez nástroje vývojara:

Pozri tiež

vlastnosť align-items,
ktorá nastavuje zarovnanie pozdĺž priečnej osi
vlastnosť place-items,
ktorá nastavuje zarovnanie prvkov vo vnútri buniek gridu