Sisällön tasaus vaakasuorassa akselissa CSS-gridissä

Gridissä voi olla tarpeen paitsi sijoittaa, myös tasata sisältöä gridin vaakasuuntaista akselia pitkin. Tässä tapauksessa käytämme justify-content-ominaisuutta, joka asetetaan parent-elementissä. Katsotaan esimerkkien avulla, miten tämä ominaisuus toimii.

Akselin alkuun

Asetetaan elementtien tasaus 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-content: start;
	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;
}

Akselin keskelle

Asetetaan nyt elementtien tasaus 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-content: 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;
}

Akselin loppuun

Asetetaan elementtien tasaus 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-content: 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;
}

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

Luo grid, joka koostuu kuudesta elementistä, jotka on sijoitettu kahteen sarakkeeseen. Suorita elementtien tasaus gridin vaakasuuntaisen akselin alkuun.

Sijoita nyt gridin elementit kolmeen sarakkeeseen ja aseta elementtien tasaus gridin vaakasuuntaisen akselin keskelle.

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