CSS ग्रिड सेल के भीतर क्षैतिज अक्ष के साथ संरेखण

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

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

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

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

और अब डिबगर में अपने ग्रिड को देखें:

अक्ष के केंद्र के साथ

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

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

#parent {
	display: grid;
	justify-items: center;
	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;
}

और अब डिबगर में अपने ग्रिड को देखें:

अक्ष के अंत के साथ

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

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

और अब डिबगर में अपने ग्रिड को देखें:

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

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

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

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