Sisu joondamine mölema telje suunas CSS gridis

Sageli võib gridis olla vajadus sisu samaaegselt joondada nii horisontaalse kui ka vertikaalse telje suunas. Selleks võime koos kasutada kahte eelmises õppetükis käsitletud omadust: justify-content ja align-content.

Vertikaalse telje alguse ja horisontaalse telje lõpu suunas

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-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;
}

Vertikaalse telje lõpu ja horisontaalse telje alguse suunas

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

Vertikaaltelje keskpunkti ja horisontaaltelje suunas

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

Praktilised ülesanded

Loo grid, mis koosneb kuuest elemendist ja paiguta need kahte veergu. Teosta elementide joondamine horisontaalse telje alguse ja vertikaalse telje keskpunkti suunas.

Nüüd paiguta gridi elemendid kolme veergu ja määra elementide joondamine horisontaalse telje keskpunkti ja vertikaalse telje lõpu suunas.

Muuda eelmist ülesannet nii, et elementide joondamine toimuks horisontaalse telje lõpu ja vertikaalse telje keskpunkti suunas.