Sisu joondamine vertikaalteljel CSS gridis

Sisu joondamiseks piki vertikaaltelge gridis kasutame omadust align-content, mis seadakse vanemelemendis.

Telje alguse suunas

Seadistame oma elementide joonduse gridis vertikaaltelje alguse suunas:

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

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

Telje keskele

Nüüd seadistame elementide joonduse vertikaaltelje keskele:

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

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

Telje lõppu

Seadistame elementide joonduse vertikaaltelje lõppu:

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

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

Praktilised ülesanded

Loo grid, mis koosneb kuuest elemendist, paigutatud kahte ritta. Teosta elementide joondamine gridi vertikaaltelje alguse suunas.

Nüüd paiguta gridi elemendid kahte ritta ja määra elementide joondamine gridi vertikaaltelje keskele.

Muuda eelmist ülesannet nii, et elementide joondamine toimuks vertikaaltelje lõppu.