CSS-gridin solujen sisällön vaakasuuntainen tasaus

Elementtien tasaukseen gridin soluissa, eli alueilla, jotka syntyvät sarakkeiden ja rivien leikkauskohdissa, käytetään justify-items-ominaisuutta, joka asetetaan pääelementissä. Tasaus on kaikkein havainnollisin gridiä tarkasteltaessa selaimen debuggaustyökalussa.

Vaaka-akselin alkuun

Tasataan elementtimme solujen sisällä vaakasuuntaisen akselin alkuun:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Katsotaan nyt gridiämme debuggaustyökalussa:

Vaaka-akselin keskelle

Tasataan elementtimme soluissa vaakasuuntaisen akselin keskelle:

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

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

Katsotaan nyt gridiämme debuggaustyökalussa:

Vaaka-akselin loppuun

Tasataan elementtimme vaakasuuntaisen akselin loppuun:

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

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

Katsotaan nyt gridiämme debuggaustyökalussa:

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

Luo grid, joka koostuu viidestä elementistä, jotka on sijoitettu kolmelle riville. Suorita elementtien tasaus vaakasuuntaista akselia pitkin.

Sijoita nyt gridin elementit kahdelle riville ja aseta elementtien tasaus soluissa vaakasuuntaisen akselin keskelle.

Muokkaa edellistä tehtävää niin, että elementtien tasaus tapahtuu vaakasuuntaisen akselin loppuun.