Zarovnanie po oboch osiach vo vnútri buniek CSS gridu

Je možné súčasne nastaviť zarovnanie prvkov vo vnútri buniek gridu aj po horizontálnej, aj po vertikálnej osi. Na tento účel môžeme kombinovať dve vlastnosti justify-items a align-items, ktoré sa nastavujú v nadradenom prvku.

Na stred osí

Zarovnajme naše prvky na stred horizontálnej a vertikálnej osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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ástroji na vývojárske účely:

Na začiatok horizontálnej a koniec vertikálnej

Umiestnime naše prvky v bunkách na začiatok horizontálnej a koniec vertikálnej osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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ástroji na vývojárske účely:

Na koniec horizontálnej a začiatok vertikálnej

Umiestnime naše prvky v bunkách na koniec horizontálnej a začiatok vertikálnej osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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ástroji na vývojárske účely:

Praktické úlohy

Vytvorte grid pozostávajúci z piatich prvkov, umiestnených v troch riadkoch. Vykonajte zarovnanie prvkov v bunkách na začiatok horizontálnej a stred vertikálnej osi.

Teraz umiestnite prvky gridu do dvoch riadkov a nastavte zarovnanie prvkov vo vnútri buniek na stred horizontálnej a začiatok vertikálnej osi.

Zmeňte predchádzajúcu úlohu tak, aby zarovnanie prvkov prebiehalo na koniec horizontálnej a stred vertikálnej osi.