Zarovnání na obou osách uvnitř buněk CSS gridu

Je možné současně nastavit zarovnání prvků uvnitř buněk gridu jak na horizontální, tak na vertikální ose. Pro tento účel můžeme zkombinovat dvě vlastnosti justify-items a align-items, které se nastavují v rodičovském elementu.

Na střed os

Pojďme zarovnat naše prvky na střed horizontální a vertikální osy:

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

Nyní se podívejme na náš grid v ladicím nástroji:

Na začátek horizontální a konec vertikální

Pojďme umístit naše prvky v buňkách na začátek horizontální a konec vertikální osy:

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

Nyní se podívejme na náš grid v ladicím nástroji:

Na konec horizontální a začátek vertikální

Pojďme umístit naše prvky v buňkách na konec horizontální a začátek vertikální osy:

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

Nyní se podívejme na náš grid v ladicím nástroji:

Praktické úlohy

Vytvořte grid skládající se z pěti prvků, umístěných ve třech řádcích. Proveďte zarovnání prvků v buňkách na začátek horizontální a střed vertikální osy.

Nyní umístěte prvky gridu do dvou řádků a nastavte zarovnání prvků uvnitř buněk na střed horizontální a začátek vertikální osy.

Upravte předchozí úlohu, aby zarovnání prvků probíhalo na konec horizontální a střed vertikální osy.