Sifa ya place-items

Sifa place-items huweka uratibishaji wa safu wima na safu mlalo kwa wakati mmoja, jambo ambalo hupunguza kwa kiasi kikubwa msimbo tunoutumia. Kwa thamani ya kwanza tunaweka mpangilio wa kipengele kwenye mhimili wima, na kwa ya pili - kwenye mhimili wa mlalo. Sifa place-items huwekwa kwenye kipengele kizazi. Utekelezaji wa kazi na place-items ni rahisi kutazama kupitia programu ya utatuzi kosa ya kivinjari.

Kisarufi

kichagua {
	place-items: thamani ya uratibishaji kwenye mlalo thamani ya uratibishaji kwenye wima;
}

Mfano . Uratibishaji katikati ya mhimili wima na 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;
	place-items: center start;
	grid-template-columns: 100px 100px;
	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;
}

Wacha tuangalie gridi yetu kupitia programu ya utatuzi kosa ya kivinjari:

Mfano . Uratibishaji mwisho wa mhimili wima na katikati ya mhimili mlalo

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	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 hebu tuangalie kwenye paneli ya programu ya utatuzi kosa:

Mfano . Uratibishaji mwanzo wa mhimili wima na mwisho wa mhimili mlalo

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

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	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;
}

Wacha tuangalie uratibishaji wa vipengele ndani ya seli kwa kutumia programu ya utatuzi kosa ya kivinjari:

Angalia pia

sifa justify-items,
ambayo huweka uratibishaji wa vipengele ndani ya seli za gridi kwenye mhimili mlalo
sifa align-items,
ambayo huweka uratibishaji kwenye mhimili wa kuvuka