Okrajšava za poravnavo znotraj celic po obeh oseh v CSS mreži

S pomočjo okrajšave lastnosti place-items lahko hkrati poravnamo elemente znotraj celic mreže po obeh oseh. Lastnost sprejme dve vrednosti, ločeni s presledkom. Prva vrednost določa umestitev elementa po navpični, druga pa po vodoravni osi. Lastnost nastavimo v starševskem elementu.

Oglejmo si delovanje te lastnosti na primerih.

Na sredino navpične in začetek vodoravne osi

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 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;
}

Oglejmo si našo mrežo v raziskovalcu napak:

Na konec navpične in sredino vodoravne osi

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 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;
}

Oglejmo si našo mrežo v raziskovalcu napak:

Na začetek navpične in konec vodoravne osi

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

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 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;
}

Oglejmo si našo mrežo v raziskovalcu napak:

Praktične naloge

Ustvarite mrežo, sestavljeno iz šestih elementov, in jih razporedite v dva stolpca. Izvedite poravnavo elementov na začetek vodoravne in sredino navpične osi mreže.

Zdaj razporedite elemente mreže v tri stolpce in nastavite poravnavo elementov na sredino vodoravne in sredino navpične osi mreže.

Spremenite prejšnjo nalogo tako, da se poravnava elementov izvaja na konec vodoravne in začetek navpične osi mreže.