Lahtrite sees olevate elementide joondamine CSS gridi horisontaalteljel

Elementide joondamiseks gridi lahtrites, st. piirkondades, mis tekivad tulpade ja ridade ristumisel, kasutatakse omadust justify-items, mis määratakse vanemelementis. Joondamist on kõige selgemalt märgata gridi brauseri silumisvahendis vaatamisel.

Telje alguse suunas

Joondame oma elemendid lahtrites horisontaaltelje alguse suunas:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Vaatame nüüd oma gridi silumisvahendis:

Telje keskele

Joondame oma elemendid lahtrites horisontaaltelje keskele:

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

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

Vaatame nüüd oma gridi silumisvahendis:

Telje lõpu suunas

Joondame oma elemendid horisontaaltelje lõpu suunas:

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

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

Vaatame nüüd oma gridi silumisvahendis:

Praktilised ülesanded

Loo grid, mis koosneb viiest elemendist, paiknevad kolmes reas. Teosta elementide joondamine horisontaalteljel.

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

Muuda eelmist ülesannet nii, et elementide joondamine toimuks horisontaaltelje lõpu suunas.