Sifa ya place-self

Sifa place-self huweka uratibu wa kipengele kimoja katika gridi mara moja kwenye mhimili wa usawa na mhimili wima. Katika thamani ya sifa kipengele cha kwanza kinaonyesha uratibu kwenye mhimili wima, cha pili - uratibu wa kipengele kimoja katika gridi kwenye mhimili usawa. Sifa hutajwa kwenye kipengele ile tunayotaka kuratibu.

Syntax

kipengele {
	place-self: thamani ya wima thamani ya usawa;
}

Mfano . Kuratibu katikati ya mhimili wima na mwanzo wa mhimili usawa

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

#parent {
	display: grid;
	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;
}
#elem1 {
	place-self: center start;
}

Mfano . Kuratibu mwanzo wa mhimili wima na mwisho wa mhimili usawa

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

#parent {
	display: grid;
	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;
}
#elem1 {
	place-self: start end;
}

Mfano . Kuratibu mwisho wa mhimili wima na katikati ya mhimili usawa

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

#parent {
	display: grid;
	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;
}
#elem1 {
	place-self: end center;
}

Angalia pia

sifa justify-self,
ambayo huweka uratibu wa kipengele kimoja katika gridi kwenye mhimili usawa
sifa align-self,
ambayo huweka uratibu wa kizuizi kimoja