Sisällön kohdistus pystyakselilla CSS-gridissä

Sisällön kohdistamiseen pystyakselia pitkin gridissä käytämme align-content-ominaisuutta, joka asetetaan pääelementissä.

Akselin alkuun

Asetetaan elementtien kohdistus gridissä pystyakselin alkuun:

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

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

Akselin keskelle

Asetetaan nyt elementtien kohdistus pystyakselin keskelle:

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

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

Akselin loppuun

Asetetaan elementtien kohdistus pystyakselin loppuun:

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

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

Käytännön tehtävät

Luo grid, joka koostuu kuudesta elementistä, jotka on sijoitettu kahteen riviin. Toteuta elementtien kohdistus gridin pystyakselin alkuun.

Sijoita nyt gridin elementit kahteen riviin ja aseta elementtien kohdistus gridin pystyakselin keskelle.

Muokkaa edellistä tehtävää niin, että elementtien kohdistus tapahtuu pystyakselin loppuun.