Poravnava obeh osi znotraj celic CSS mreže

Lahko sočasno nastavite poravnavo elementov znotraj celic mreže tako po vodoravni kot po navpični osi. Za ta namen lahko kombiniramo dve lastnosti justify-items in align-items, ki sta nastavljeni v starševskem elementu.

Na sredino osi

Poravnajmo naše elemente na sredino vodoravne in navpične 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;
}

Zdaj pa poglejmo našo mrežo v razhroščevalniku:

Na začetek vodoravne in konec navpične osi

Postavimo naše elemente v celicah na začetek vodoravne in konec navpične 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;
}

Zdaj pa poglejmo našo mrežo v razhroščevalniku:

Na konec vodoravne in začetek navpične osi

Postavimo naše elemente v celicah na konec vodoravne in začetek navpične 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;
}

Zdaj pa poglejmo našo mrežo v razhroščevalniku:

Praktične naloge

Ustvarite mrežo, sestavljeno iz petih elementov, razporejenih v tri vrstice. Izvedite poravnavo elementov v celicah na začetek vodoravne in sredino navpične osi.

Zdaj razporedite elemente mreže v dve vrstici in nastavite poravnavo elementov znotraj celic na sredino vodoravne in začetek navpične osi.

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