Alinhamento dentro de células de Grid CSS no eixo vertical

Para alinhar elementos dentro de células de grid no eixo vertical, usamos a propriedade align-items, que é definida no elemento pai. O funcionamento desta propriedade pode ser visto ao visualizar o grid no depurador do navegador.

No início do eixo

Vamos alinhar nossos elementos dentro das células no início do eixo vertical:

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

Vejamos nosso grid no depurador do navegador:

No centro do eixo

Agora vamos alinhar nossos elementos nas células ao centro do eixo vertical:

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

Vejamos nosso grid no depurador do navegador:

No final do eixo

Vamos alterar novamente o alinhamento dos elementos, desta vez para o final do eixo vertical:

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

Vejamos nosso grid no depurador do navegador:

Tarefas práticas

Crie um grid, consistindo de seis elementos, dispostos em duas colunas. Execute o alinhamento dos elementos dentro das células no início do eixo vertical.

Agora posicione os elementos do grid em três colunas e defina o alinhamento dos elementos nas células ao centro do eixo vertical do grid.

Altere a tarefa anterior para que o alinhamento dos elementos ocorra no final do eixo vertical.