Uratibu wa Kipengele Kimoja kwenye Mhimili Wima wa Gridi ya CSS

Vivyo hivyo, inawezekana kuratibu vipelele kwenye mhimili wima kwa kutumia sifa align-self. Tuangalie kwa mifano, jinsi inavyofanya kazi.

Mwanzo wa mhimili wima

Wacha tuweke uratibu wa kipengele cha kwanza kwenye mwanzo wa mhimili wima:

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

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

Katikati ya mhimili wima

Wacha tuweke uratibu wa kipengele cha kwanza katikati ya mhimili wima:

<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);
	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;
}
#elem1 {
	align-self: center;
}

Mwisho wa mhimili wima

Wacha tuweke uratibu wa kipengele chetu cha kwanza kwenye gridi kwenye mwisho wa mhimili wima:

<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);
	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;
}
#elem1 {
	align-self: end;
}

Kazi za Vitendo

Unda gridi, inayojumuisha vipelele vitano vilivyopangwa kwenye safu mbili za wima. Fanya uratibu wa kipengele cha tatu kwenye mwanzo wa mhimili wima wa gridi.

Sasa pangewa vipelele vya gridi kwenye safu tatu za wima na weka uratibu wa kipengele cha pili katikati ya mhimili wima wa gridi.

Badilisha kazi iliyopita, ili uratibu wa vipelele vya nne na vitano ufanyike kwenye mwisho na mwanzo wa mhimili wima mtawalia.