Joondamine mõlemal teljel CSS-võre lahtrites

Võime samaaegselt määrata elementide joondamise võre lahtrite sees nii horisontaalsel kui ka vertikaalsel teljel. Selleks saame kombineerida kahte omadust justify-items ja align-items, mis on määratud vanem-elemendis.

Telgede keskpunkti

Joondame oma elemendid horisontaalse ja vertikaalse telje keskpunkti:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Vaatame nüüd oma võre silumisprogrammis:

Horisontaalse alguse ja vertikaalse lõpu järgi

Paigutame oma elemendid lahtritesse horisontaalse telje alguse ja vertikaalse telje lõpu järgi:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Vaatame nüüd oma võre silumisprogrammis:

Horisontaalse lõpu ja vertikaalse alguse järgi

Paigutame oma elemendid lahtritesse horisontaalse telje lõpu ja vertikaalse telje alguse järgi:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Vaatame nüüd oma võre silumisprogrammis:

Praktilised ülesanded

Looge võre, mis koosneb viiest elemendist, paigutatud kolmele reale. Tehke elementide joondamine lahtrites horisontaalse telje alguse ja vertikaalse telje keskpunkti järgi.

Nüüd paigutage võre elemendid kahele reale ja määrake elementide joondamine lahtrite sees horisontaalse telje keskpunkti ja vertikaalse telje alguse järgi.

Muutke eelmist ülesannet nii, et elementide joondamine toimuks horisontaalse telje lõpu ja vertikaalse telje keskpunkti järgi.