CSS-gridin solujen sisällön kohdistus pystyakselilla

Elementtien kohdistamiseen grid-solujen sisällä pystyakselilla käytämme align-items-ominaisuutta, joka asetetaan pääelementissä. Tämän ominaisuuden toiminta voidaan nähdä tarkasteltaessa gridiä selaimen debuggaajassa.

Akselin alkuun

Kohdistetaan elementtimme solujen sisällä 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-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;
}

Katsotaan gridiämme selaimen debuggaajassa:

Akselin keskelle

Kohdistetaan nyt elementtimme solujen sisällä 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-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;
}

Katsotaan gridiämme selaimen debuggaajassa:

Akselin loppuun

Muutetaan taas elementtien kohdistusta, tällä kertaa pystyakselin loppuun:

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

Katsotaan gridiämme selaimen debuggaajassa:

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

Luo grid, joka koostuu kuudesta elementistä, jotka on sijoitettu kahteen sarakkeeseen. Suorita elementtien kohdistus solujen sisällä pystyakselin alkuun.

Sijoita nyt gridin elementit kolmeen sarakkeeseen ja aseta elementtien kohdistus solujen sisällä gridin pystyakselin keskelle.

Muuta edellistä tehtävää siten, että elementtien kohdistus tapahtuu pystyakselin loppuun.