Poravnava posameznega elementa na obeh oseh CSS mreže

Lahko poravnamo posamezen element hkrati tako po horizontalni kakor tudi po vertikalni osi z združevanjem lastnosti justify-self in align-self.

Na začetek horizontalne in sredino vertikalne osi

Nastavimo poravnavo za naš prvi element na začetek horizontalne in sredino vertikalne osi:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

Na sredino horizontalne in začetek vertikalne osi

Zdaj nastavimo poravnavo prvega elementa na sredino horizontalne in začetek vertikalne osi:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

Na konec horizontalne in sredino vertikalne osi

Nastavimo poravnavo prvega elementa na konec horizontalne in sredino vertikalne osi:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

Praktične naloge

Ustvarite mrežo, sestavljeno iz šestih elementov in jih razporedite v dve vrstici. Izvedite poravnavo drugega elementa na začetek horizontalne in sredino vertikalne osi.

Zdaj razporedite elemente mreže v tri vrstice in nastavite poravnavo tretjega elementa na sredino horizontalne in konec vertikalne osi.

Spremenite prejšnjo nalogo, tako da bo poravnava četrtega elementa na koncu horizontalne in sredini vertikalne osi.

Zdaj naredite tako, da bo poravnava petega elementa na začetku horizontalne in začetku vertikalne osi, šestega elementa pa na koncu horizontalne in sredini vertikalne osi.