Usawazishaji ndani ya seli za Gridi ya CSS kwenye mhimili wa usawa

Kwa usawazishaji wa vipengele ndani ya seli za gridi, yaani maeneo yanayotokana na makutano ya safu wima na safu mlalo, inatumika sifa justify-items, ambayo hutajwa kwenye kipengele kizazi mkuu. Usawazishaji unaweza kuonekana wazi zaidi unapotazama gridi kwenye kipimo cha kivinjari.

Mwanzo wa mhimili

Wacha tusawazishe vipengele vyetu ndani ya seli kwa mwanzo wa mhimili wa usawa:

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

Sasa tuangalie gridi yetu kwenye kipimo:

Katikati ya mhimili

Wacha tusawazishe vipengele vyetu katika seli kwa katikati ya mhimili wa usawa:

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

Sasa tuangalie gridi yetu kwenye kipimo:

Mwisho wa mhimili

Wacha tusawazishe vipengele vyetu kwa mwisho wa mhimili wa usawa:

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

Sasa tuangalie gridi yetu kwenye kipimo:

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele vinne, vilivyopangwa katika safu tatu. Fanya usawazishaji wa vipengele kwenye mhimili wa usawa.

Sasa panga vipengele vya gridi katika safu mbili na weka usawazishaji wa vipengele katika seli kwa katikati ya mhimili wa usawa.

Badilisha kazi iliyopita, ili usawazishaji wa vipengele ufanyike kwa mwisho wa mhimili wa usawa.