Usawazishaji wa Yaliyomo kwenye Axes Zote mbili kwenye Gridi ya CSS

Mara nyingi kwenye gridi, huenda ikahitajika kusawazisha yaliyomo wakati huo huo kwenye mhimili mlalo na mhimili wima wa gridi. Kwa lengo hili, tunaweza kutumia pamoja sifa mbili, zilizochambuliwa nawe katika somo lililopita: justify-content na align-content.

Kwenye Mwanzo wa Wima na Mwisho wa Mlalo

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-start;
	grid-template-columns: 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;
}

Kwenye Mwisho wa Wima na Mwanzo wa Mlalo

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-end;
	grid-template-columns: 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;
}

Katikati ya Mhimili Wima na Mlalo

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: center;
	grid-template-columns: 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;
}

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele sita na uwaweke kwenye nguzo mbili. Fanya usawazishaji wa vipengele kwenye mwanzo wa mhimili mlalo na katikati ya mhimili wima wa gridi.

Sasa weka vipengele vya gridi kwenye nguzo tatu na weka usawazishaji wa vipengele katika katikati ya mhimili mlalo na mwisho wa mhimili wima wa gridi.

Badilisha kazi iliyopita, ili usawazishaji wa vipengele ufanyike kwenye mwisho wa mhimili mlalo na katikati ya mhimili wima wa gridi.