Poravnava vsebine po obeh oseh v CSS mreži

Pogosto se v mreži pojavi potreba po sočasni poravnavi vsebine vzdolž vodoravne in navpične osi mreže. Za ta namen lahko skupaj uporabimo dve lastnosti, ki ste jih spoznali v prejšnji lekciji: justify-content in align-content.

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;
	justify-content: flex-end;
	align-content: flex-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;
}

Na konec navpične in začetek vodoravne osi

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

Na sredino navpične osi in vodoravne osi

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

Praktične naloge

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

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

Spremenite prejšnjo nalogo tako, da bo poravnava elementov potekala na konec vodoravne osi in sredino navpične osi mreže.