Uratibu wa Vipengele kwenye Axsi Zote Ndani ya Seli za Gridi ya CSS

Inawezekana kuweka uratibu wa vipengele ndani ya seli za gridi kwenye axsi mlalo na wima wakati huo huo. Kwa lengo hili tunaweza kuchanganya sifa mbili justify-items na align-items, ambazo hutaarifiwa kwenye kipengele-kizazi.

Katikati ya Axsi

Wacha tuwaratishe vipengele vyetu katikati ya axsi mlalo na wima:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

Sasa tuangalie gridi yetu kwenye kipimo-chakata:

Mwanzo wa Axsi Mlalo na Mwisho wa Axsi Wima

Wacha tuweke vipengele vyetu kwenye seli kwa mwanzo wa axsi mlalo na mwisho wa axsi wima:

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

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

Sasa tuangalie gridi yetu kwenye kipimo-chakata:

Mwisho wa Axsi Mlalo na Mwanzo wa Axsi Wima

Wacha tuweke vipengele vyetu kwenye seli kwa mwisho wa axsi mlalo na mwanzo wa axsi wima:

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

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

Sasa tuangalie gridi yetu kwenye kipimo-chakata:

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele vitano vilivyowekwa kwenye safu tatu. Fanya uratibu wa vipengele kwenye seli kwa mwanzo wa axsi mlalo na katikati ya axsi wima.

Sasa weka vipengele vya gridi kwenye safu mbili na uweke uratibu wa vipengele ndani ya seli kwa katikati ya axsi mlalo na mwanzo wa axsi wima.

Badilisha kazi iliyopita, ili uratibu wa vipengele ufanyike kwa mwisho wa axsi mlalo na katikati ya axsi wima.