Üksiku elemendi joondamine mõlemale teljele CSS gridis

Üksikut elementi saab joondada korraga nii horisontaalselt kui ka vertikaalselt omaduste justify-self ja align-self kombineerimise teel.

Horisontaalse alguse ja vertikaalse keskme järgi

Määrame oma esimese elemendi joonduse horisontaalse alguse ja vertikaalse keskme järgi:

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

Horisontaalse keskme ja vertikaalse alguse järgi

Nüüd määrame esimese elemendi joonduse horisontaalse keskme ja vertikaalse alguse järgi:

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

Horisontaalse lõpu ja vertikaalse keskme järgi

Määrame esimese elemendi joonduse horisontaalse lõpu ja vertikaalse keskme järgi:

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

Praktilised ülesanded

Loo grid, mis koosneb kuuest elemendist ja paiguta need kahte ritta. Teosta teise elemendi joondamine horisontaalse alguse ja vertikaalse keskme järgi.

Nüüd paiguta gridi elemendid kolme ritta ja määra kolmanda elemendi joondus horisontaalse keskme ja vertikaalse lõpu järgi.

Muuda eelmist ülesannet nii, et neljanda elemendi joondus toimuks horisontaalse lõpu ja vertikaalse keskme järgi.

Nüüd tee nii, et viienda elemendi joondus toimuks horisontaalse alguse ja vertikaalse alguse järgi, ning kuuenda elemendi joondus - horisontaalse lõpu ja vertikaalse keskme järgi.