Sifa ya justify-items

Sifa justify-items inaweka uratibu wa vipengele ndani ya seli za gridi kwenye mhimili mlalo. Uratibu unaonekana wazi zaidi unapoangalia gridi kwenye kipima-hitilafu cha kivinjari. Inatumika kwa kipengele kizazi.

Kisarufu

kichaguli {
	justify-items: flex-start | flex-end | center ;
}

Thamani

Thamani	Maelezo
`flex-start`	Vipengele vinasukuma mwanzo wa mhimili mlalo.
`flex-end`	Vitalu vinasukuma mwisho wa mhimili mlalo.
`center`	Vitalu vimesimama katikati ya mhimili mlalo.

Mfano . Uratibu kwenye mwanzo wa mhimili mlalo

Wacha tuweke uratibu wa vipengele vyetu ndani ya seli kwenye mwanzo wa 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-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Sasa tuangalie gridi yetu kwenye kipima-hitilafu:

Mfano . Uratibu katikati ya mhimili mlalo

Wacha tuweke uratibu wa vipengele vyetu katika seli 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-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Tukiunganisha kipima-hitilafu cha kivinjari tutaona gridi yetu:

Mfano . Uratibu kwenye mwisho wa mhimili mlalo

Wacha tuweke uratibu wa vipengele vyetu kwenye mwisho wa 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-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Sasa tuangalie gridi kupitia kipima-hitilafu:

Angalia pia

sifa align-items,
ambayo inaweka uratibu kwenye mhimili wa kuvuka
sifa place-items,
ambayo inaweka uratibu wa vipengele ndani ya seli za gridi