Usawazishaji wa Maudhui kwenye Mhimili mlalo katika Gridi ya CSS

Katika gridi, inaweza kuhitajika sio tu kupanga, bali pia kusawazisha maudhui kwenye mhimili mlalo wa gridi. Katika kesi hii tunatumia sifa justify-content, ambayo hupeanwa kwenye kipengele kizazi mkuu. Tutaangalia kwa mifano, jinsi sifa hii inavyofanya kazi.

Mwanzo wa mhimili

Wacha tuweke usawazishaji kwa vipengele vyetu mwanzoni mwa mhimili mlalo:

<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;
}

Katikati ya mhimili

Sasa tuweke usawazishaji kwa vipengele vyetu katikati ya mhimili mlalo:

<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;
}

Mwisho wa mhimili

Wacha tuweke usawazishaji kwa vipengele vyetu mwishoni mwa mhimili mlalo:

<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;
}

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele sita vilivyopangwa kwenye safu wima mbili. Fanya usawazishaji wa vipengele mwanzoni mwa mhimili mlalo wa gridi.

Sasa panga vipengele vya gridi kwenye safu wima tatu na weka usawazishaji wa vipengele katikati ya mhimili mlalo wa gridi.

Badilisha kazi iliyopita ili usawazishaji wa vipengele ufanyike mwishoni mwa mhimili mlalo.