Sisu joondamine horisontaalteljel CSS gridis

Gridis võib tekkida vajadus mitte ainult paigutada, vaid ka joondada sisu piki horisontaaltelge. Sellisel juhul kasutame omadust justify-content, mis antakse ülemiselemendile. Vaatame näidetega, kuidas see omadus töötab.

Telje alguses

Määrame meie elementide joonduse horisontaaltelje algusesse:

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

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

Telje keskel

Nüüd määrame meie elementide joonduse 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-content: 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;
}

Telje lõpus

Määrame nüüd meie elementide joonduse horisontaaltelje lõppu:

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

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

Praktilised ülesanded

Loo grid, mis koosneb kuuest elemendist, paigutatud kahte veergu. Teosta elementide joondus horisontaaltelje algusesse.

Nüüd paiguta gridi elemendid kolme veeru peale ja määra elementide joondus horisontaaltelje keskele.

Muuda eelmist ülesannet nii, et elementide joondus toimuks horisontaaltelje lõppu.