CSS Gridi lahtrite sees vertikaalne joondamine

Elementide joondamiseks gridi lahtrites vertikaalteljel kasutame vanemelementis määratud atribuuti align-items. Selle atribuudi toimimist saab näha brauseri silumist vahendades gridi vaatamisel.

Telje alguses

Joondame oma elemendid lahtrites vertikaaltelje algusesse:

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

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

Vaadakem oma gridi brauseri silumisvahendites:

Telje keskel

Nüüd joondame oma elemendid lahtrites vertikaaltelje keskpunkti:

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

#parent {
	display: grid;
	align-items: 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 brauseri silumisvahendites:

Telje lõpus

Muudame uuesti elementide joondamist, seekord vertikaaltelje lõppu:

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

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

Vaadakem oma gridi brauseri silumisvahendites:

Praktilised ülesanded

Loo grid, mis koosneb kuuest elemendist, paigutatud kahte veergu. Teosta elementide joondamine lahtrites vertikaaltelje algusesse.

Nüüd paiguta gridi elemendid kolme veeru peale ja määra elementide joondamine lahtrites vertikaaltelje keskpunkti.

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