Lühend lahtrite sees mõlema telje suunas joondamiseks CSS gridis

Lühendatud omadust place-items saab kasutada elementide joondamiseks gridi lahtrite sees samaaegselt mõlemas teljes. Omadus võtab kaks väärtust, mis on eraldatud tühikuga. Esimese väärtusega määrame elemendi asukoha vertikaalsel ja teise horisontaalsel teljel. Omadus määratakse vanem-elemendis.

Vaatame selle omaduse tööd näidete varal.

Vertikaalselt keskele ja horisontaalselt algusesse

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

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

Vaadakem oma gridi veaotsijas:

Vertikaalselt lõppu ja horisontaalselt keskele

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

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

Vaadakem oma gridi veaotsijas:

Vertikaalselt algusesse ja horisontaalselt lõppu

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

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

Vaadakem oma gridi veaotsijas:

Praktilised ülesanded

Looge grid, mis koosneb kuuest elemendist ja asetage need kahte veergu. Viige elemendid joondusesse horisontaaltelje algusesse ja vertikaaltelje keskele.

Nüüd asetage gridi elemendid kolme veergu ja määrake elementide joondus horisontaaltelje keskele ja vertikaaltelje keskele.

Muutke eelmist ülesannet nii, et elementide joondus toimuks horisontaaltelje lõppu ja vertikaaltelje algusesse.