सीएसएस ग्रिड में क्षैतिज अक्ष के साथ अलग-अलग तत्व का संरेखण

क्षैतिज अक्ष के साथ संरेखण न केवल मूल तत्व में निर्दिष्ट किया जा सकता है, बल्कि प्रत्येक चाइल्ड के लिए अलग से भी निर्दिष्ट किया जा सकता है। इस उद्देश्य के लिए justify-self गुण का उपयोग किया जाता है।

क्षैतिज अक्ष की शुरुआत के साथ

आइए हमारे पहले तत्व के लिए संरेखण को क्षैतिज अक्ष की शुरुआत के साथ सेट करें:

<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;
}

क्षैतिज अक्ष के केंद्र के साथ

आइए पहले तत्व के लिए संरेखण को क्षैतिज अक्ष के केंद्र के साथ सेट करें:

<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;
}

क्षैतिज अक्ष के अंत के साथ

आइए पहले तत्व के लिए संरेखण को क्षैतिज अक्ष के अंत के साथ सेट करें:

<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;
}

व्यावहारिक कार्य

दो पंक्तियों में स्थित पांच तत्वों वाला एक ग्रिड बनाएं। दूसरे तत्व का संरेखण क्षैतिज अक्ष की शुरुआत के साथ करें।

अब ग्रिड के तत्वों को तीन पंक्तियों में व्यवस्थित करें और तीसरे तत्व का संरेखण ग्रिड की क्षैतिज अक्ष के केंद्र के साथ निर्दिष्ट करें।

पिछले कार्य को इस प्रकार बदलें, कि पांचवें तत्व का संरेखण क्षैतिज अक्ष के अंत के साथ हो।