Alinierea în interiorul celulelor grilei CSS pe axa verticală

Pentru alinierea elementelor în interiorul celulelor grilei pe axa verticală folosim proprietatea align-items, care este setată în elementul părinte. Funcționarea acestei proprietăți poate fi văzută la vizualizarea grilei în instrumentul de dezvoltare din browser.

Pe începutul axei

Să aliniem elementele noastre în interiorul celulelor pe începutul axei verticale:

<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;
}

Să ne uităm la grila noastră în instrumentul de dezvoltare din browser:

Pe centrul axei

Și acum să aliniem elementele noastre în celule pe centrul axei verticale:

<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;
}

Să ne uităm la grila noastră în instrumentul de dezvoltare din browser:

Pe sfârșitul axei

Să schimbăm din nou alinierea elementelor, de data aceasta pe sfârșitul axei verticale:

<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 {
	
}

Să ne uităm la grila noastră în instrumentul de dezvoltare din browser:

Sarcini practice

Creați o grilă formată din șase elemente, aranjate în două coloane. Efectuați alinierea elementelor în interiorul celulelor pe începutul axei verticale.

Acum aranjați elementele grilei pe trei coloane și setați alinierea elementelor în celule pe centrul axei verticale a grilei.

Modificați sarcina anterioară astfel încât alinierea elementelor să se facă pe sfârșitul axei verticale.