Usawazishaji wa Kipengele Kimoja kwenye Mihori Yote ya Gridi ya CSS

Inawezekana kusawazisha kipengele kimoja wakati huo huo kwenye mihori ya usawa na wima kwa kuchanganya sifa za justify-self na align-self.

Kwenye Mwanzo wa Mlalo na Katikati ya Wima

Wacha tuweke usawazishaji wa kipengele chetu cha kwanza kwenye mwanzo wa mhimli usawa na katikati ya mhimli 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 {
	justify-self: start;
	align-self: center;
}

Katikati ya Mlalo na Mwanzo wa Wima

Sasa tuweke usawazishaji wa kipengele cha kwanza kwenye katikati ya mhimli usawa na mwanzo wa mhimli 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 {
	justify-self: center;
	align-self: start;
}

Mwisho wa Mlalo na Katikati ya Wima

Wacha tuweke usawazishaji wa kipengele cha kwanza kwenye mwisho wa mhimli usawa na katikati ya mhimli 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 {
	justify-self: end;
	align-self: center;
}

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele sita na uwaweke kwenye safu mbili. Fanya usawazishaji wa kipengele cha pili kwenye mwanzo wa mhimli usawa na katikati ya mhimli wima.

Sasa weka vipengele vya gridi kwenye safu tatu na weka usawazishaji wa kipengele cha tatu kwenye katikati ya mhimli usawa na mwisho wa mhimli wima.

Badilisha kazi iliyopita, ili usawazishaji wa kipengele cha nne ufanyike kwenye mwisho wa mhimli usawa na katikati ya mhimli wima.

Sasa fanya hivi, ili usawazishaji wa kipengele cha tano ufanyike kwenye mwanzo wa mhimli usawa na mwanzo wa mhimli wima, na kipengele cha sita - kwenye mwisho wa mhimli usawa na katikati ya mhimli wima.