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

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

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

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

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

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

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

छह तत्वों से युक्त एक ग्रिड बनाएं, जो दो कॉलम में व्यवस्थित हों। तत्वों को ग्रिड की क्षैतिज अक्ष की शुरुआत के साथ संरेखित करें।

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

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