Подравнување внатре во ќелиите на CSS мрежата по вертикална оска

За подравнување на елементите внатре во ќелиите на мрежата по вертикалната оска ние користиме својство align-items, кое се задава во елементот-родител. Работата на ова својство може да се види при преглед на мрежата во дебагерот на прелистувачот.

По почетокот на оската

Ајде да ги подравиме нашите елементи внатре во ќелиите по почетокот на вертикалната оска:

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

#parent {
	display: grid;
	align-items: 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;
}

Да ја погледнеме нашата мрежа во дебагерот на прелистувачот:

По центарот на оската

А сега ајде да ги подравиме нашите елементи во ќелиите по центарот на вертикалната оска:

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

#parent {
	display: grid;
	align-items: 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;
}

Да ја погледнеме нашата мрежа во дебагерот на прелистувачот:

По крајот на оската

Повторно да го смениме подравнувањето на елементите, овој пат по крајот на вертикалната оска:

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Да ја погледнеме нашата мрежа во дебагерот на прелистувачот:

Практични задачи

Создадете мрежа, составена од шест елементи, распоредени во две колони. Извршете подравнување на елементите внатре во ќелиите по почетокот на вертикалната оска.

Сега распоредете ги елементите на мрежата во три колони и зададете подравнување на елементите во ќелиите по центарот на вертикалната оска на мрежата.

Сменете ја претходната задача така, што подравнувањето на елементите ќе се случува по крајот на вертикалната оска.