Alinhamento de conteúdo em ambos os eixos no CSS Grid

Frequentemente no grid, pode ser necessário alinhar o conteúdo simultaneamente ao longo dos eixos horizontal e vertical do grid. Para esse propósito, podemos usar em conjunto duas propriedades, vistas por você na lição anterior: justify-content e align-content.

No início do eixo vertical e final do horizontal

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

No final do eixo vertical e início do horizontal

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

No centro do eixo vertical e horizontal

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

Tarefas práticas

Crie um grid, consistindo de seis elementos e posicione-os em duas colunas. Execute o alinhamento dos elementos no início do eixo horizontal e centro do eixo vertical do grid.

Agora posicione os elementos do grid em três colunas e defina o alinhamento dos elementos no centro do eixo horizontal e final do eixo vertical do grid.

Altere a tarefa anterior, para que o alinhamento dos elementos ocorra no final do eixo horizontal e centro do eixo vertical do grid.