Zarovnanie vnútri buniek CSS gridu pozdĺž horizontálnej osi

Pre zarovnanie prvkov vnútri buniek gridu, t.j. oblastí, ktoré vznikajú pri pretínaní stĺpcov a riadkov, sa používa vlastnosť justify-items, ktorá sa nastavuje na nadradenom prvku. Zarovnanie je najzreteľnejšie pri prezeraní gridu v nástrojoch vývojára prehliadača.

Na začiatok osi

Zarovnajme naše prvky 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);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

Na stred osi

Zarovnajme naše prvky v bunkách na stred 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);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

Na koniec 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);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

Praktické úlohy

Vytvorte grid pozostávajúci z piatich prvkov, usporiadaných do troch riadkov. Vykonajte zarovnanie prvkov pozdĺž horizontálnej osi.

Teraz umiestnite prvky gridu do dvoch riadkov a nastavte zarovnanie prvkov v bunkách na stred horizontálnej osi.

Zmeňte predchádzajúcu úlohu tak, aby sa zarovnanie prvkov uskutočňovalo na koniec horizontálnej osi.