Üksiku elemendi joondamine CSS gridi horisontaalteljel

Horisontaaltelje joondamist saab määrata mitte ainult vanemelementis, vaid ka iga järglase jaoks eraldi. Selleks kasutatakse omadust justify-self.

Horisontaaltelje alguse suunas

Määrame oma esimese elemendi joonduse horisontaaltelje alguse suunas:

<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 {
	justify-self: start;
}

Horisontaaltelje keskele

Määrame esimese elemendi joonduse horisontaaltelje keskele:

<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 {
	justify-self: center;
}

Horisontaaltelje lõppu

Määrame esimese elemendi joonduse horisontaaltelje lõppu:

<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 {
	justify-self: end;
}

Praktilised ülesanded

Loo grid, mis koosneb viiest elemendist, paigutatud kahte rida. Teosta teise elemendi joondamine horisontaaltelje alguse suunas.

Nüüd paiguta gridi elemendid kolme rea kaupa ja määra kolmanda elemendi joondamine gridi horisontaaltelje keskele.

Muuta eelmist ülesannet nii, et viienda elemendi joondamine toimuks horisontaaltelje lõppu.