justify-items प्रॉपर्टी

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

सिंटैक्स

सिलेक्टर {
	justify-items: flex-start | flex-end | center ;
}

वैल्यूज

वैल्यू	विवरण
`flex-start`	तत्व क्षैतिज अक्ष की शुरुआत में aligned होते हैं।
`flex-end`	ब्लॉक क्षैतिज अक्ष के अंत में aligned होते हैं।
`center`	ब्लॉक क्षैतिज अक्ष के केंद्र में aligned होते हैं।

उदाहरण . क्षैतिज अक्ष की शुरुआत के साथ संरेखण

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

<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);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

अब डिबगर के माध्यम से ग्रिड देखें:

यह भी देखें

align-items प्रॉपर्टी,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करती है
place-items प्रॉपर्टी,
जो ग्रिड सेल के अंदर तत्वों का संरेखण निर्धारित करती है