Yksittäisen elementin tasaus CSS-gridin pystyakselilla

Vastaavalla tavalla elementtejä voidaan tasata pystyakselilla käyttämällä ominaisuutta align-self. Katsotaan esimerkkien avulla, kuinka se toimii.

Pystyakselin alkuun

Asetetaan ensimmäisen elementin tasaus pystyakselin alkuun:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: start;
}

Pystyakselin keskelle

Asetetaan ensimmäisen elementin tasaus pystyakselin keskelle:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: center;
}

Pystyakselin loppuun

Asetetaan ensimmäisen elementin tasaus gridissä pystyakselin loppuun:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: end;
}

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

Luo grid, joka koostuu viidestä elementistä, jotka on sijoitettu kahteen sarakkeeseen. Suorita kolmannen elementin tasaus gridin pystyakselin alkuun.

Sijoita nyt gridin elementit kolmeen sarakkeeseen ja aseta toisen elementin tasaus gridin pystyakselin keskelle.

Muokkaa edellistä tehtävää niin, että neljännen ja viidennen elementin tasaus tapahtuu pystyakselin loppuun ja alkuun vastaavasti.